Button

Buttons of type basic

Primary (href) home

The basic button has no background or border. The text color is determined by the color property. This button also lacks padding left and right. 

<a id="61efb0b9625f55.34042670" class="c-button c-button__basic c-button__basic--primary c-button--md ripple ripple--before" href="https://helsingborg.se" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="61efb0b96260c">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Primary (href)
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efb0b9626b4" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9626af">
                    home
            </i>
            </span>
        
                    
            
    </span>
</a>
<button id="61efb0b9627054.41278239" class="c-button c-button__basic c-button__basic--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962712">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Secondary
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b9627759.44409670" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962789">   
    <span class="c-button__label">
    
                    <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

Outlined buttons consist of a border colored by the color property. The content(icon/text) will also be colored by the color property. 

<a id="61efb0b96285c9.57803376" class="c-button c-button__outlined c-button__outlined--primary c-button--md ripple ripple--before" href="https://helsingborg.se" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="61efb0b962869">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Primary outlined
            </span>
        
                    
            
    </span>
</a>
<button id="61efb0b9628b24.58144681" class="c-button c-button__outlined c-button__outlined--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9628bc">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Secondary outlined
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b9628ff6.60250104" class="c-button c-button__outlined c-button__outlined--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962909">   
    <span class="c-button__label">
    
                    <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

Buttons with type filled and in three different colors. 

<a id="61efb0b9629bc1.81238191" class="c-button c-button__filled c-button__filled--primary c-button--md ripple ripple--before" href="https://helsingborg.se" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" data-uid="61efb0b9629c9">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Primary filled
            </span>
        
                    
            
    </span>
</a>
<button id="61efb0b962a0d7.48606899" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962a18">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Secondary filled
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b962a599.09287382" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962a63">   
    <span class="c-button__label">
    
                    <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

You can choose to have both text and an icon. You can also switch positions of the text and icon by setting reverse to true. 

<button id="61efb0b962b034.52949071" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962b0f">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Reversed
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efb0b962b5e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962b5a">
                    close
            </i>
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b962ba18.99432401" class="c-button c-button__filled c-button__filled--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962bad">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Not reversed
            </span>

            <span class="c-button__label-icon">
                <!-- icon.blade.php -->
    <i id="61efb0b962bf7" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962bf3">
                    close
            </i>
            </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

This is a button with only an icon. This is the only button that will be rendered as a square. 

<button id="61efb0b962cfd6.14088679" class="c-button c-button__basic c-button__basic--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962d0c">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b962d59" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962d55">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b962d9f8.68091944" class="c-button c-button__filled c-button__filled--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962dac">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b962df4" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962df0">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b962e338.06426591" class="c-button c-button__outlined c-button__outlined--primary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962e3f">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b962e87" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962e83">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b962ec52.50468190" class="c-button c-button__basic c-button__basic--secondary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962ed1">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b962f19" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962f15">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b962f5f7.58824698" class="c-button c-button__filled c-button__filled--secondary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962f6b">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b962fb3" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b962faf">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b962ff24.61181706" class="c-button c-button__outlined c-button__outlined--secondary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b962ffe">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963044" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963041">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9630932.58734115" class="c-button c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b96309f">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9630e6" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9630e3">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9631249.89240015" class="c-button c-button__filled c-button__filled--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963130">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963178" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963174">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9631b68.67850904" class="c-button c-button__outlined c-button__outlined--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9631c2">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963208" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963205">
                    close
            </i>
        
                    
            
    </span>
</button>
<!-- typography.blade.php  -->
<p id="61efb0b963282" class="c-typography c-typography__variant--h3" data-uid="61efb0b96327f">
    Button with icon only - sizes
</p>
<button id="61efb0b9632f12.49821358" class="c-button c-button__filled c-button__filled--default c-button__icon-size--sm ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963301">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963353" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efb0b963350">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9633956.03384104" class="c-button c-button__filled c-button__filled--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9633a1">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9633e9" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9633e5">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9634270.31424913" class="c-button c-button__filled c-button__filled--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963434">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b96347b" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb0b963477">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9634b94.93610626" class="c-button c-button__outlined c-button__outlined--default c-button__icon-size--sm ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9634c5">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b96350c" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efb0b963508">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b96354a0.83734276" class="c-button c-button__outlined c-button__outlined--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963557">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b96359e" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b96359a">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9635db9.22938573" class="c-button c-button__outlined c-button__outlined--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9635e7">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b96362c" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb0b963629">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9636694.26811481" class="c-button c-button__basic c-button__basic--default c-button__icon-size--sm ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963675">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9636bb" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efb0b9636b7">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9636f84.53514348" class="c-button c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963704">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963749" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963746">
                    close
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9637883.62074768" class="c-button c-button__basic c-button__basic--default c-button__icon-size--lg ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963794">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9637d9" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb0b9637d5">
                    close
            </i>
        
                    
            
    </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

Different sizes ranging from sm to lg 

<button id="61efb0b96388a4.60635236" class="c-button c-button__filled c-button__filled--secondary c-button--sm ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963897">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Size sm
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b9638de9.37466549" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9638e9">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Size md
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b96392e5.46372981" class="c-button c-button__filled c-button__filled--secondary c-button--lg ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b96393a">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Size lg
            </span>
        
                    
            
    </span>
</button>
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm',
'background' => 'default'
])
@endbutton

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

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

Size with icons

Different sizes ranging from sm to lg with icons 

<button id="61efb0b9639e85.35373773" class="c-button c-button__filled c-button__filled--secondary c-button--sm ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9639f5">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Size sm
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efb0b963a42" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efb0b963a3e">
                    home
            </i>
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b963a836.54768250" class="c-button c-button__filled c-button__filled--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963a8e">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Size md
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efb0b963ad7" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963ad4">
                    home
            </i>
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b963b158.75967194" class="c-button c-button__filled c-button__filled--secondary c-button--lg ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963b21">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text--reverse">
                Size lg
            </span>

            <span class="c-button__label-icon--reverse">
                <!-- icon.blade.php -->
    <i id="61efb0b963b69" class="c-icon c-icon--size-lg material-icons" translate="no" role="img" alt="" data-uid="61efb0b963b65">
                    home
            </i>
            </span>
        
                    
            
    </span>
</button>
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm',
'background' => 'default',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton

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

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

Disabled buttons

A button with the data-attribute disabled set to true will be greyed out and cursor set to not-allowed. 

<button id="61efb0b963c140.89638387" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" disabled="" type="button" aria-pressed="false" data-uid="61efb0b963c21">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Disabled
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b963c687.32012068" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" disabled="" type="button" aria-pressed="false" data-uid="61efb0b963c73">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Disabled outlined
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b963cb47.56588175" class="c-button c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" disabled="" type="button" aria-pressed="false" data-uid="61efb0b963cc0">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963d08" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963d05">
                    close
            </i>
        
                    
            
    </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

When pressing a toggle-button the text color will go from black to primary to indicate it being toggled. 

<!-- typography.blade.php  -->
<p id="61efb0b963e2d" class="c-typography c-typography__variant--h3" data-uid="61efb0b963e2a">
    Basic buttons
</p>
<button id="61efb0b963e6f2.21165044" class="c-button c-button__basic c-button__basic--primary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963e7f">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963ed2" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963ece">
                    format_align_left
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b963f127.97474996" class="c-button c-button__basic c-button__basic--secondary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963f20">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963f69" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963f65">
                    format_align_center
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b963fa75.19434515" class="c-button c-button__basic c-button__basic--default c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b963fb5">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b963ffc" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b963ff8">
                    format_align_right
            </i>
        
                    
            
    </span>
</button>
<!-- typography.blade.php  -->
<p id="61efb0b964043" class="c-typography c-typography__variant--h3" data-uid="61efb0b964040">
    Filled buttons
</p>
<button id="61efb0b96407c6.50680505" class="c-button c-button__filled c-button__filled--primary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b96408b">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9640d2" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9640cf">
                    format_align_left
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9641136.88247563" class="c-button c-button__filled c-button__filled--secondary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b964124">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b96416a" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b964167">
                    format_align_center
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9641a82.42158802" class="c-button c-button__filled c-button__filled--default c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9641b6">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9641fd" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9641fa">
                    format_align_right
            </i>
        
                    
            
    </span>
</button>

<!-- typography.blade.php  -->
<p id="61efb0b964243" class="c-typography c-typography__variant--h3" data-uid="61efb0b964241">
    Outline buttons
</p>
<button id="61efb0b96427d7.95120741" class="c-button c-button__outlined c-button__outlined--primary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b96428b">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9642d1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9642ce">
                    format_align_left
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b96430f5.19027232" class="c-button c-button__outlined c-button__outlined--secondary c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b96431d">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b964363" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b964360">
                    format_align_center
            </i>
        
                    
            
    </span>
</button>
<button id="61efb0b9643a15.72114526" class="c-button c-button__outlined c-button__outlined--default c-button__icon-size--md c-button__toggle ripple ripple--before c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b9643b0">   
    <span class="c-button__label">
    
                    <!-- icon.blade.php -->
    <i id="61efb0b9643f6" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efb0b9643f3">
                    format_align_right
            </i>
        
                    
            
    </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

Type

Use the type attribute to help define the action of the button. 

<button id="61efb0b9644af4.94535595" class="c-button c-button__basic c-button__basic--primary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="submit" aria-pressed="false" data-uid="61efb0b9644bf">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Submit
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b9645151.17142643" class="c-button c-button__basic c-button__basic--secondary c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="61efb0b964523">   
    <span class="c-button__label">
    
                    <span class="c-button__label-text">
                Secondary
            </span>
        
                    
            
    </span>
</button>
<button id="61efb0b9645746.50007772" class="c-button c-button__basic c-button__basic--default c-button--md ripple ripple--before" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="reset" aria-pressed="false" data-uid="61efb0b964581">   
    <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.
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.
labelMod string - -
attributeList {"js-toggle-trigger":"","js-toggle-item":""} array - -
reversePositions false boolean - Reverse the position of icon and text.
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: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Button/button.json