Button

Buttons of type basic

Primary (href) 
<a class="c-button c-button__basic c-button__basic--primary c-button--md" target="_top" type="button" href="https://helsingborg.se" aria-label="Primary (href)" data-uid="680c3106c7954">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7a89">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Primary (href)
            </span>
        
    </span> </a>
    <button class="c-button c-button__basic c-button__basic--secondary c-button--md" target="_top" type="button" aria-label="Secondary" data-uid="680c3106c7ae6">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Secondary
            </span>
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" type="button" aria-label="Default" data-uid="680c3106c7b23">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Default
            </span>
        
    </span> </button>
@button([
    'text' => 'Primary (href)',
    'color' => 'primary',
    'style' => 'basic',
    'href' => 'https://helsingborg.se',
    'icon' => 'home',
    'reversePositions' => 'true'
]) 
@endbutton

@button([
    'text' => 'Secondary',
    'color' => 'secondary',
    'style' => 'basic'
])
@endbutton

@button([
    'text' => 'Default',
    'color' => 'default',
    'style' => 'basic'
])
@endbutton

Buttons of type outlined

Primary outlined 
<a class="c-button c-button__outlined c-button__outlined--primary c-button--md" target="_top" type="button" href="https://helsingborg.se" aria-label="Primary outlined" data-uid="680c3106c7b98">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Primary outlined
            </span>
        
    </span> </a>
    <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md" target="_top" type="button" aria-label="Secondary outlined" data-uid="680c3106c7bd8">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Secondary outlined
            </span>
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--md" target="_top" type="button" aria-label="Default outlined" data-uid="680c3106c7c08">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Default outlined
            </span>
        
    </span> </button>
@button([
    'text' => 'Primary outlined',
    'style' => 'outlined',
    'color' => 'primary',
    'href' => 'https://helsingborg.se'
])
@endbutton

@button([
    'text' => 'Secondary outlined',
    'color' => 'secondary',
    'style' => 'outlined'
])
@endbutton

@button([
    'text' => 'Default outlined',
    'color' => 'default',
    'style' => 'outlined'
])
@endbutton

Type filled

Primary filled 
<a class="c-button c-button__filled c-button__filled--primary c-button--md" target="_top" type="button" href="https://helsingborg.se" aria-label="Primary filled" data-uid="680c3106c7c65">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Primary filled
            </span>
        
    </span> </a>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--md" target="_top" type="button" aria-label="Secondary filled" data-uid="680c3106c7c94">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Secondary filled
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Default filled" data-uid="680c3106c7cc1">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Default filled
            </span>
        
    </span> </button>
@button([
    'text' => 'Primary filled',
    'color' => 'primary',
    'style' => 'filled',
    'href' => 'https://helsingborg.se'

])
@endbutton

@button([
    'text' => 'Secondary filled',
    'color' => 'secondary',
    'style' => 'filled'

])
@endbutton

@button([
    'text' => 'Default filled',
    'color' => 'default',
    'style' => 'filled'
])
@endbutton

Buttons with both text and icon 

<button class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Reversed" data-uid="680c3106c7d1f">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7d53">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Reversed
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Not reversed" data-uid="680c3106c7d9a">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7dcc">
                    </span>
            </span>
        
                    <span class="c-button__label-text ">
                Not reversed
            </span>
        
    </span> </button>
@button([
    'icon' => 'close',
    'reversePositions' => true,
    'text' => 'Reversed',
    'style' => 'filled'
])
@endbutton

@button([
    'icon' => 'close',
    'text' => 'Not reversed',
    'style' => 'filled'
])
@endbutton

Button with icon only

Button with icon only - sizes 

<button class="c-button c-button__basic c-button__basic--primary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c7e3b">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7e6e">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c7eaa">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7ed9">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c7f11">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7f40">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c7f76">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c7fa4">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c7fd9">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c801b">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c8052">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8083">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c80bb">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c80ec">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c812c">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c815a">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c8197">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c81c5">
                    </span>
            </span>
        
        
    </span> </button>
    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="680c3106c821c">
    Button with icon only - sizes
</p>
    <button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c8262">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8295">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c82ce">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c82ff">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c8340">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c837f">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c83b7">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c83e7">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c841d">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c844d">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--lg c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c8483">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c84b3">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c84ea">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c852c">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c856d">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c85a1">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--lg c-button--icon-only" target="_top" aria-label="close" type="button" data-uid="680c3106c85dc">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c860f">
                    </span>
            </span>
        
        
    </span> </button>
@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'primary',
])
@endbutton

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'primary',
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'primary',
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'secondary',
])
@endbutton

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'secondary',
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'md',
    'color' => 'secondary',
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@typography([
    "variant" => "h3"
])
    Button with icon only - sizes
@endtypography

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'sm'
])
@endbutton

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@button([
    'style' => 'filled',
    'icon' => 'close',
    'size' => 'lg'
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'sm'
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@button([
    'style' => 'outlined',
    'icon' => 'close',
    'size' => 'lg'
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'sm'
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'md'
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'size' => 'lg'
])
@endbutton

Size 

<button class="c-button c-button__filled c-button__filled--secondary c-button--sm" target="_top" type="button" aria-label="Size sm" data-uid="680c3106c868a">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Size sm
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--md" target="_top" type="button" aria-label="Size md" data-uid="680c3106c86c1">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Size md
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--lg" target="_top" type="button" aria-label="Size lg" data-uid="680c3106c86f5">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Size lg
            </span>
        
    </span> </button>
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm'
])
@endbutton

@button([
'color' => 'secondary',
'size' => 'md',
'text' => 'Size md'
])
@endbutton

@button([
'color' => 'secondary',
'size' => 'lg',
'text' => 'Size lg'
])
@endbutton

Size with icons 

<button class="c-button c-button__filled c-button__filled--secondary c-button--sm" target="_top" type="button" aria-label="Size sm" data-uid="680c3106c8761">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-sm" aria-hidden="false" material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8799">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Size sm
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--md" target="_top" type="button" aria-label="Size md" data-uid="680c3106c87db">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8810">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Size md
            </span>
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--lg" target="_top" type="button" aria-label="Size lg" data-uid="680c3106c884f">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--home c-icon--material c-icon--material-home material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-lg" aria-hidden="false" material-symbol="home" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8883">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Size lg
            </span>
        
    </span> </button>
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton

@button([
'color' => 'secondary',
'size' => 'md',
'text' => 'Size md',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton

@button([
'color' => 'secondary',
'size' => 'lg',
'text' => 'Size lg',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton

Disabled buttons 

<button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" js-toggle-trigger="" disabled="" type="button" aria-label="Disabled" data-uid="680c3106c88f9">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Disabled
            </span>
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" js-toggle-trigger="" disabled="" type="button" aria-label="Disabled outlined" data-uid="680c3106c8931">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Disabled outlined
            </span>
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" target="_top" disabled="" aria-label="close" type="button" data-uid="680c3106c896f">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--close c-icon--material c-icon--material-close material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="close" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c89af">
                    </span>
            </span>
        
        
    </span> </button>
@button([
    'style' => 'basic',
    'text' => 'Disabled',
    'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton

@button([
    'style' => 'basic',
    'text' => 'Disabled outlined',
    'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton

@button([
    'style' => 'basic',
    'icon' => 'close',
    'attributeList' => ['disabled' => ''],
    'size' => 'md'
])
@endbutton

Togglebuttons

Basic buttons

Filled buttons

Outline buttons 

<!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="680c3106c8a20">
    Basic buttons
</p>
    <button class="c-button c-button__basic c-button__basic--primary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c8a5a">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8a8f">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_center" type="button" data-uid="680c3106c8acf">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8b02">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_right" type="button" data-uid="680c3106c8b40">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-right c-icon--material c-icon--material-format_align_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8b73">
                    </span>
            </span>
        
        
    </span> </button>
    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="680c3106c8baa">
    Filled buttons
</p>
    <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c8bea">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8c1a">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_center" type="button" data-uid="680c3106c8c53">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8c82">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_right" type="button" data-uid="680c3106c8cbb">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-right c-icon--material c-icon--material-format_align_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8cea">
                    </span>
            </span>
        
        
    </span> </button>

    <!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="680c3106c8d20">
    Outline buttons
</p>
    <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c8d5b">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8d8b">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_center" type="button" data-uid="680c3106c8dc5">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8df4">
                    </span>
            </span>
        
        
    </span> </button>
    <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button__toggle c-button--icon-only" target="_top" aria-pressed="false" aria-label="format_align_right" type="button" data-uid="680c3106c8e2c">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-right c-icon--material c-icon--material-format_align_right material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8e5b">
                    </span>
            </span>
        
        
    </span> </button>
@typography([
    "variant" => "h3"
])
    Basic buttons
@endtypography

@button([
    'icon' => 'format_align_left',
    'toggle' => true,
    'size' => 'md',
    'color' => 'primary',
    'style' => 'basic'
])
@endbutton

@button([
    'icon' => 'format_align_center',
    'toggle' => true,
    'size' => 'md',
    'color' => 'secondary',
    'style' => 'basic'
])
@endbutton

@button([
    'icon' => 'format_align_right',
    'toggle' => true,
    'size' => 'md',
    'style' => 'basic'
])
@endbutton

@typography([
    "variant" => "h3"
])
    Filled buttons
@endtypography

@button([
    'icon' => 'format_align_left',
    'toggle' => true,
    'size' => 'md',
    'color' => 'primary',
    'style' => 'filled'
])
@endbutton

@button([
    'icon' => 'format_align_center',
    'toggle' => true,
    'size' => 'md',
    'color' => 'secondary',
    'style' => 'filled'
])
@endbutton

@button([
    'icon' => 'format_align_right',
    'toggle' => true,
    'size' => 'md',
    'style' => 'filled'
])
@endbutton


@typography([
    "variant" => "h3"
])
    Outline buttons
@endtypography

@button([
    'icon' => 'format_align_left',
    'toggle' => true,
    'size' => 'md',
    'color' => 'primary',
    'style' => 'outlined'
])
@endbutton

@button([
    'icon' => 'format_align_center',
    'toggle' => true,
    'size' => 'md',
    'color' => 'secondary',
    'style' => 'outlined'
])
@endbutton

@button([
    'icon' => 'format_align_right',
    'toggle' => true,
    'size' => 'md',
    'style' => 'outlined'
])
@endbutton

Togglebuttons with interchangable labels and icons

Toggle buttons with interchangable labels & icons 

<!-- typography.blade.php   original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="680c3106c8ec4">
    Toggle buttons with interchangable labels & icons
</p>

    <div style="margin-bottom: 32px;">

            <button class="c-button c-button__basic c-button__basic--primary c-button--md c-button__toggle c-button--icon-only" target="_top" data-toggle-icon="close" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c8f01">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8f34">
                    </span>
            </span>
        
        
    </span> </button>
            <button class="c-button c-button__basic c-button__basic--primary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" aria-pressed="false" type="button" aria-label="Click me!" data-uid="680c3106c8f7b">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Click me!
            </span>
        
    </span> </button>
            <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open" data-uid="680c3106c8fac">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c8fd7">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open
            </span>
        
    </span> </button>
    </div>


    <div style="margin-bottom: 32px;">

            <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button__toggle c-button--icon-only" target="_top" data-toggle-icon="close" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c900f">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c9039">
                    </span>
            </span>
        
        
    </span> </button>
            <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" aria-pressed="false" type="button" aria-label="Click me!" data-uid="680c3106c906b">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Click me!
            </span>
        
    </span> </button>
            <button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open" data-uid="680c3106c909b">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c90c8">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open
            </span>
        
    </span> </button>
    </div>


    <div style="margin-bottom: 32px;">

            <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button__toggle c-button--icon-only" target="_top" data-toggle-icon="close" aria-pressed="false" aria-label="format_align_left" type="button" data-uid="680c3106c90fe">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon ">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-left c-icon--material c-icon--material-format_align_left material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c914d">
                    </span>
            </span>
        
        
    </span> </button>
            <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" aria-pressed="false" type="button" aria-label="Click me!" data-uid="680c3106c9188">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Click me!
            </span>
        
    </span> </button>
            <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md c-button__toggle" target="_top" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open" data-uid="680c3106c91bd">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                            <span class="c-button__label-icon c-button__label-icon--reverse">
                    <!-- icon.blade.php -->
    <span class="c-icon c-icon--format-align-center c-icon--material c-icon--material-format_align_center material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined  c-icon--size-md" aria-hidden="false" material-symbol="format_align_center" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c3106c91ed">
                    </span>
            </span>
        
                    <span class="c-button__label-text c-button__label-text--reverse">
                Open
            </span>
        
    </span> </button>
    </div>
@typography([
    "variant" => "h3"
])
    Toggle buttons with interchangable labels & icons
@endtypography

@foreach(['basic', 'filled', 'outlined'] as $style)

    <div style="margin-bottom: 32px;">

        @button([
            'icon' => 'format_align_left',
            'toggle' => true,
            'size' => 'md',
            'color' => 'primary',
            'style' => $style,
            'attributeList' => [
                'data-toggle-icon' => 'close' //Icon id
            ]
        ])
        @endbutton

        @button([
            'text' => 'Click me!',
            'toggle' => true,
            'size' => 'md',
            'color' => 'primary',
            'style' => $style,
            'attributeList' => [
                'data-toggle-label' => 'Close', //New label
            ]
        ])
        @endbutton

        @button([
            'text' => 'Open',
            'icon' => 'format_align_center',
            'toggle' => true,
            'size' => 'md',
            'color' => 'secondary',
            'style' => $style,
            'reversePositions' => true,
            'attributeList' => [
                'data-toggle-label' => 'Close', //New label
                'data-toggle-icon' => 'close' //Icon id
            ]
        ])
        @endbutton

    </div>

@endforeach

Type 

<button class="c-button c-button__basic c-button__basic--primary c-button--md" target="_top" type="submit" aria-label="Submit" data-uid="680c3106c925f">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Submit
            </span>
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--secondary c-button--md" target="_top" type="button" aria-label="Secondary" data-uid="680c3106c9290">   
     <span class="c-button__label">                     <span class="c-button__loader"></span>
                
                    <span class="c-button__label-text ">
                Secondary
            </span>
        
    </span> </button>
    <button class="c-button c-button__basic c-button__basic--default c-button--md" target="_top" type="reset" aria-label="Default" data-uid="680c3106c92d0">   
     <span class="c-button__label">                 
                    <span class="c-button__label-text ">
                Default
            </span>
        
    </span> </button>
@button([
    'text' => 'Submit',
    'color' => 'primary',
    'style' => 'basic',
    'type' => 'submit'
])
@endbutton

@button([
    'text' => 'Secondary',
    'color' => 'secondary',
    'style' => 'basic',
    'type' => 'button'
])
@endbutton

@button([
    'text' => 'Default',
    'color' => 'default',
    'style' => 'basic',
    'type' => 'reset'
])
@endbutton

Blade component parameters

Key Default value Type Available values Description
text false boolean - The text-content of a button.
size md string - The size of the button; sm, md, lg.
color default string - The color scheme for the button.
type button string - What button type.
style filled string - The type of appearance, can be basic, filled or outlined.
shape normal string - If the shape of the button should be normal, or fully rounded (pill style).
href false boolean - Where should the button link to?
target _top string - Open a new tab or not?
componentElement button string - The tag to use for this component.
labelElement span string - The element containing the label.
ripple true boolean - Enable / disable ripple on click.
pressed false string - -
toggle false boolean - Will toggle the color of the font.
icon false boolean - The name of the icon.
reversePositions false boolean - Reverse the position of icon and text.
fullWidth false boolean - Makes button full width.
classListIcon [] array - Array of classes placed on the icon
classListText [] array - Array of classes placed on the text
ariaLabel string - Aria label text for the button
disableColor true boolean - To use or not to use the disabled color even if the button is disabled
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Button/button.json