Button
Buttons of type basic
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 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="647e427f26db4">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f26eb4">
<span data-nosnippet aria-hidden="true">
home
</span>
</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="647e427f26f24">
<span class="c-button__label">
<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="647e427f26f66">
<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
Outlined buttons consist of a border colored by the color property. The content(icon/text) will also be colored by the color property.
<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="647e427f2710e">
<span class="c-button__label">
<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="647e427f2714e">
<span class="c-button__label">
<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="647e427f271a4">
<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
Buttons with type filled and in three different colors.
<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="647e427f273db">
<span class="c-button__label">
<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="647e427f27454">
<span class="c-button__label">
<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="647e427f27493">
<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 class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" aria-label="Reversed" data-uid="647e427f27614">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2765f">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f276a4">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f276e2">
<span data-nosnippet aria-hidden="true">
close
</span>
</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
This is a button with only an icon. This is the only button that will be rendered as a square.
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="647e427f2790c">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27988">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f279d6">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27a16">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27a58">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27a94">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27bb0">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27bee">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27c2d">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27c69">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27cc5">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27d00">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27d3f">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27d81">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27dc3">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27dfd">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27e44">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27e80">
<span data-nosnippet aria-hidden="true">
close
</span>
</span>
</span>
</span> </button>
<!-- typography.blade.php -->
<p class="c-typography c-typography__variant--h3" data-uid="647e427f27ef4">
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="647e427f27f56">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-sm" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f27fac">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f27ff1">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2802b">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f28069">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-lg" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f280a5">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f280e4">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-sm" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2811e">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f28172">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f281b3">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f281f1">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-lg" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2822a">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f28267">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-sm" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f282a2">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f282df">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28318">
<span data-nosnippet aria-hidden="true">
close
</span>
</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="647e427f28357">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-lg" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28391">
<span data-nosnippet aria-hidden="true">
close
</span>
</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
Different sizes ranging from sm to lg
<button class="c-button c-button__filled c-button__filled--secondary c-button--sm" target="_top" type="button" aria-label="Size sm" data-uid="647e427f28526">
<span class="c-button__label">
<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="647e427f2856a">
<span class="c-button__label">
<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="647e427f285a6">
<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 class="c-button c-button__filled c-button__filled--secondary c-button--sm" target="_top" type="button" aria-label="Size sm" data-uid="647e427f287df">
<span class="c-button__label">
<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-icons c-icon--size-sm" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2883a">
<span data-nosnippet aria-hidden="true">
home
</span>
</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="647e427f28883">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f288c2">
<span data-nosnippet aria-hidden="true">
home
</span>
</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="647e427f28902">
<span class="c-button__label">
<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-icons c-icon--size-lg" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28946">
<span data-nosnippet aria-hidden="true">
home
</span>
</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',
'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 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="647e427f28b96">
<span class="c-button__label">
<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="647e427f28bda">
<span class="c-button__label">
<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="647e427f28c17">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--close c-icon--material c-icon--material-close material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28c5c">
<span data-nosnippet aria-hidden="true">
close
</span>
</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
When pressing a toggle-button the text color will go from black to primary to indicate it being toggled.
Basic buttons
Filled buttons
Outline buttons
<!-- typography.blade.php -->
<p class="c-typography c-typography__variant--h3" data-uid="647e427f28ec4">
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="647e427f28f0d">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28f50">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f28fb5">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f28ff9">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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="647e427f2903d">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2907c">
<span data-nosnippet aria-hidden="true">
format_align_right
</span>
</span>
</span>
</span> </button>
<!-- typography.blade.php -->
<p class="c-typography c-typography__variant--h3" data-uid="647e427f290c8">
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="647e427f29136">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29187">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f291e1">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f292f0">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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="647e427f29332">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2936e">
<span data-nosnippet aria-hidden="true">
format_align_right
</span>
</span>
</span>
</span> </button>
<!-- typography.blade.php -->
<p class="c-typography c-typography__variant--h3" data-uid="647e427f293a9">
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="647e427f293e4">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29420">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f29460">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f294a4">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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="647e427f294f9">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29538">
<span data-nosnippet aria-hidden="true">
format_align_right
</span>
</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
When pressing a toggle-button label and/or the icon will be changed to indicate the action.
Toggle buttons with interchangable labels & icons
<!-- typography.blade.php -->
<p class="c-typography c-typography__variant--h3" data-uid="647e427f29720">
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="647e427f29782">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f297da">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f29825">
<span class="c-button__label">
<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="647e427f2986b">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f298b1">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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="647e427f298fb">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f2993a">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f2999a">
<span class="c-button__label">
<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="647e427f299dd">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29a1e">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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="647e427f29a66">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29aa5">
<span data-nosnippet aria-hidden="true">
format_align_left
</span>
</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="647e427f29ae5">
<span class="c-button__label">
<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="647e427f29b4f">
<span class="c-button__label">
<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-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e427f29b8f">
<span data-nosnippet aria-hidden="true">
format_align_center
</span>
</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
Use the type attribute to help define the action of the button.
<button class="c-button c-button__basic c-button__basic--primary c-button--md" target="_top" type="submit" aria-label="Submit" data-uid="647e427f29d03">
<span class="c-button__label">
<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="647e427f29e11">
<span class="c-button__label">
<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="647e427f29e5d">
<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. |
attributeList | [] | array | - | - |
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 | false | boolean | - | 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. |