Button
Buttons of type basic
<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="68632ff9ac222">
<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="68632ff9ac353">
</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="68632ff9ac3b1">
<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="68632ff9ac406">
<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'
])
@endbuttonButtons of type 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="68632ff9ac5a2">
<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="68632ff9ac5ec">
<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="68632ff9ac62e">
<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'
])
@endbuttonType 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="68632ff9ac83a">
<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="68632ff9ac88e">
<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="68632ff9ac8c8">
<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'
])
@endbuttonButtons 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="68632ff9aca32">
<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="68632ff9aca7b">
</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="68632ff9acac4">
<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="68632ff9acafc">
</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'
])
@endbuttonButton 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="68632ff9acf0e">
<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="68632ff9acf57">
</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="68632ff9acfa7">
<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="68632ff9acfdd">
</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="68632ff9ad01b">
<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="68632ff9ad04d">
</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="68632ff9ad088">
<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="68632ff9ad0b9">
</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="68632ff9ad0f2">
<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="68632ff9ad122">
</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="68632ff9ad15a">
<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="68632ff9ad18a">
</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="68632ff9ad1c1">
<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="68632ff9ad1f0">
</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="68632ff9ad227">
<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="68632ff9ad255">
</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="68632ff9ad28b">
<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="68632ff9ad2ba">
</span>
</span>
</span> </button>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="68632ff9ad318">
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="68632ff9ad34f">
<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="68632ff9ad38e">
</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="68632ff9ad3c7">
<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="68632ff9ad3f6">
</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="68632ff9ad42d">
<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="68632ff9ad45c">
</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="68632ff9ad491">
<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="68632ff9ad4bf">
</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="68632ff9ad4f3">
<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="68632ff9ad521">
</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="68632ff9ad55e">
<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="68632ff9ad587">
</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="68632ff9ad5b5">
<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="68632ff9ad5de">
</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="68632ff9ad60d">
<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="68632ff9ad635">
</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="68632ff9ad663">
<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="68632ff9ad68b">
</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'
])
@endbuttonSize
<button class="c-button c-button__filled c-button__filled--secondary c-button--sm" target="_top" type="button" aria-label="Size sm" data-uid="68632ff9ad823">
<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="68632ff9ad864">
<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="68632ff9ad897">
<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'
])
@endbuttonSize 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="68632ff9ada16">
<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="68632ff9ada57">
</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="68632ff9ada9d">
<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="68632ff9adad2">
</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="68632ff9adb10">
<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="68632ff9adb4c">
</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'
])
@endbuttonDisabled 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="68632ff9adce3">
<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="68632ff9add25">
<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="68632ff9add5d">
<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="68632ff9add94">
</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'
])
@endbuttonTogglebuttons
Basic buttons
Filled buttons
Outline buttons
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="68632ff9ae08c">
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="68632ff9ae0d6">
<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="68632ff9ae114">
</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="68632ff9ae15a">
<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="68632ff9ae190">
</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="68632ff9ae1d0">
<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="68632ff9ae204">
</span>
</span>
</span> </button>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="68632ff9ae24f">
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="68632ff9ae288">
<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="68632ff9ae2bf">
</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="68632ff9ae309">
<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="68632ff9ae33f">
</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="68632ff9ae382">
<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="68632ff9ae3b8">
</span>
</span>
</span> </button>
<!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="68632ff9ae3f0">
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="68632ff9ae427">
<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="68632ff9ae45c">
</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="68632ff9ae49d">
<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="68632ff9ae4d1">
</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="68632ff9ae510">
<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="68632ff9ae544">
</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'
])
@endbuttonTogglebuttons 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="68632ff9ae7a8">
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="68632ff9ae7fd">
<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="68632ff9ae83f">
</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="68632ff9ae88b">
<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="68632ff9ae8cc">
<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="68632ff9ae906">
</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="68632ff9ae950">
<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="68632ff9ae98b">
</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="68632ff9ae9cd">
<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="68632ff9aea0a">
<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="68632ff9aea4c">
</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="68632ff9aea8d">
<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="68632ff9aeac0">
</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="68632ff9aeb36">
<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="68632ff9aeb72">
<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="68632ff9aeba9">
</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>
@endforeachType
<button class="c-button c-button__basic c-button__basic--primary c-button--md" target="_top" type="submit" aria-label="Submit" data-uid="68632ff9aed45">
<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="68632ff9aed89">
<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="68632ff9aedc1">
<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'
])
@endbuttonBlade 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. |