Home
Components
Button
Button
The Button component is used to trigger actions, submit forms, or navigate users through primary, secondary, and default button variants.
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" href="https://getmunicipio.com" target="_top" aria-label="Primary (href)" data-uid="6a44efe7e6813" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" type="button" aria-label=
"Secondary" data-uid="6a44efe7e6a23" data-component="button"><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" type="button" aria-label="Default" data-uid="6a44efe7e6a7b" data-component="button"><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://getmunicipio.com',
'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" href="https://getmunicipio.com" target="_top" aria-label="Primary outlined" data-uid="6a44efe7e6b83" data-component=
"button"><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"
type="button" aria-label="Secondary outlined" data-uid="6a44efe7e6be3" data-component="button"><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" type="button" aria-label="Default outlined" data-uid="6a44efe7e6c32"
data-component="button"><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://getmunicipio.com'
])
@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" href="https://getmunicipio.com" target="_top" aria-label="Primary filled" data-uid="6a44efe7e6d24" data-component=
"button"><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" type=
"button" aria-label="Secondary filled" data-uid="6a44efe7e6d80" data-component="button"><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" type="button" aria-label="Default filled" data-uid="6a44efe7e6dcc" data-component="button"><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://getmunicipio.com'
])
@endbutton
@button([
'text' => 'Secondary filled',
'color' => 'secondary',
'style' => 'filled'
])
@endbutton
@button([
'text' => 'Default filled',
'color' => 'default',
'style' => 'filled'
])
@endbutton
Full width buttons
By setting the fullWidth attribute to true, the button will stretch to fill the width of its container.
<a class="c-button c-button__filled c-button__filled--primary c-button--md c-button__full-width" href="https://getmunicipio.com" target="_top" aria-label="Primary full width" data-uid="6a44efe7e6edb"
data-component="button"><span class="c-button__label"><span class="c-button__label-text">Primary full width</span></span></a><br />
<button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__full-width" type="button" aria-label="Secondary full width" data-uid="6a44efe7e6f38" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Secondary full width</span></span></button><br />
<button class="c-button c-button__filled c-button__filled--default c-button--md c-button__full-width" type="button" aria-label="Default full width" data-uid="6a44efe7e6f87" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Default full width</span></span></button><br />
<a class="c-button c-button__filled c-button__filled--primary c-button--md c-button__full-width" href="https://getmunicipio.com" target="_top" aria-label="Primary full width (ico)" data-uid=
"6a44efe7e6fd5" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Primary full width (ico)</span></span></a><br />
<button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__full-width" type="button" aria-label="Secondary full width (ico)" data-uid="6a44efe7e708b" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Secondary full width (ico)</span></span></button><br />
<button class="c-button c-button__filled c-button__filled--default c-button--md c-button__full-width" type="button" aria-label="Default full width (ico)" data-uid="6a44efe7e714f" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Default full width (ico)</span></span></button>
@button([
'text' => 'Primary full width',
'color' => 'primary',
'style' => 'filled',
'fullWidth' => true,
'href' => 'https://getmunicipio.com'
])
@endbutton
<br>
@button([
'text' => 'Secondary full width',
'color' => 'secondary',
'style' => 'filled',
'fullWidth' => true
])
@endbutton
<br>
@button([
'text' => 'Default full width',
'color' => 'default',
'style' => 'filled',
'fullWidth' => true
])
@endbutton
<br>
@button([
'text' => 'Primary full width (ico)',
'color' => 'primary',
'style' => 'filled',
'fullWidth' => true,
'href' => 'https://getmunicipio.com',
'icon' => 'link',
'reversePositions' => true
])
@endbutton
<br>
@button([
'text' => 'Secondary full width (ico)',
'color' => 'secondary',
'style' => 'filled',
'fullWidth' => true,
'icon' => 'link',
'reversePositions' => true
])
@endbutton
<br>
@button([
'text' => 'Default full width (ico)',
'color' => 'default',
'style' => 'filled',
'fullWidth' => true,
'icon' => 'link',
'reversePositions' => true
])
@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.
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
Reversed
Not reversed
<button class="c-button c-button__basic c-button__basic--default c-button--sm" type="button" aria-label="Reversed" data-uid="6a44efe7e72f8" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--sm" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e73bd" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md" type="button" aria-label="Reversed" data-uid="6a44efe7e7468" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e751c" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--lg" type="button" aria-label="Reversed" data-uid="6a44efe7e75c2" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--lg" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e765f" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button><br />
<button class="c-button c-button__filled c-button__filled--default c-button--sm" type="button" aria-label="Reversed" data-uid="6a44efe7e7702" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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--sm" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e779f" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--md" type="button" aria-label="Reversed" data-uid="6a44efe7e783c" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e78fd" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--lg" type="button" aria-label="Reversed" data-uid="6a44efe7e79c7" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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--lg" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e7a7c" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button><br />
<button class="c-button c-button__outlined c-button__outlined--default c-button--sm" type="button" aria-label="Reversed" data-uid="6a44efe7e7b1e" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--sm" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e7bba" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--md" type="button" aria-label="Reversed" data-uid="6a44efe7e7c56" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--md" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e7cfb" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--lg" type="button" aria-label="Reversed" data-uid="6a44efe7e7d9a" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Reversed</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--lg" type="button" aria-label=
"Not reversed" data-uid="6a44efe7e7e47" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Not
reversed</span></span></button><br />
@foreach (['basic', 'filled', 'outlined'] as $style)
@foreach (['sm', 'md', 'lg'] as $size)
@button([
'icon' => 'close',
'reversePositions' => true,
'text' => 'Reversed',
'style' => $style,
'size' => $size
])
@endbutton
@button([
'icon' => 'close',
'text' => 'Not reversed',
'style' => $style,
'size' => $size
])
@endbutton
@endforeach
<br>
@endforeach
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" aria-label="close" type="button" data-uid="6a44efe7e8018" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e80f7" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e819b"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e824f" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e82fb"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8394"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e842e" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e84d3" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e856b"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="6a44efe7e8636" data-component="typography">
Button with icon only - sizes
</p><button class="c-button c-button__filled c-button__filled--default c-button--sm c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8687" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e872a" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--lg c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e87c6" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--sm c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8883"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8928"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--lg c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e89c8"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--sm c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8a66" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8b09" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--lg c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe7e8b9c" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</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
Visual alignment modifier
Use the c-button--align-visually modifier on basic icon-only buttons when the hover area should extend outside the layout without shifting the icon alignment. The bordered wrapper below makes the negative inline spacing visible.
<div class="u-display--flex u-gap--5">
<div class="u-display--inline-block u-border--1" style="line-height: 0em;">
<button class="c-button c-button--align-visually c-button__basic c-button__basic--default c-button--md c-button--icon-only" aria-label="close" type="button" data-uid="6a44efe8093de"
data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
</div>
<div class="u-display--inline-block u-border--1" style="line-height: 0em;">
<button class="c-button c-button--align-visually c-button__basic c-button__basic--default c-button--md" type="button" aria-label="Button" data-uid="6a44efe8094d8" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php --></span> <span class="c-button__label-text">Button</span></span></button>
</div>
</div>
<div class="u-display--flex u-gap--5">
<div class="u-display--inline-block u-border--1" style="line-height: 0em;">
@button([
'style' => 'basic',
'icon' => 'close',
'size' => 'md',
'classList' => ['c-button--align-visually']
])
@endbutton
</div>
<div class="u-display--inline-block u-border--1" style="line-height: 0em;">
@button([
'text' => 'Button',
'style' => 'basic',
'icon' => 'close',
'size' => 'md',
'classList' => ['c-button--align-visually']
])
@endbutton
</div>
</div>
Size
Different sizes ranging from sm to lg
<div class="c-group u-width--100 c-group--horizontal" data-uid="6a44efe8098f8" data-component="group">
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--sm c-field--radius-md" id="id_6a44efe8096f8" data-uid="6a44efe80971e" data-component="field">
<div class="c-field__inner c-field__inner--text">
<input id="input_id_6a44efe8096f8" value="" aria-label="" type="text" autocomplete="on" />
<div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
<!-- icon.blade.php -->
</div>
</div><button class="c-button c-button__filled c-button__filled--secondary c-button--sm" type="button" aria-label="Size sm" data-uid="6a44efe809860" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Size sm</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-width--100 c-group--horizontal" data-uid="6a44efe809b1b" data-component="group">
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6a44efe80998c" data-uid="6a44efe8099a3" data-component="field">
<div class="c-field__inner c-field__inner--text">
<input id="input_id_6a44efe80998c" value="" aria-label="" type="text" autocomplete="on" />
<div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
<!-- icon.blade.php -->
</div>
</div><button class="c-button c-button__filled c-button__filled--secondary c-button--md" type="button" aria-label="Size md" data-uid="6a44efe809ac8" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Size md</span></span></button>
</div><!-- group.blade.php -->
<div class="c-group u-width--100 c-group--horizontal" data-uid="6a44efe809cc5" data-component="group">
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--lg c-field--radius-md" id="id_6a44efe809b5f" data-uid="6a44efe809b71" data-component="field">
<div class="c-field__inner c-field__inner--text">
<input id="input_id_6a44efe809b5f" value="" aria-label="" type="text" autocomplete="on" />
<div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
<!-- icon.blade.php -->
</div>
</div><button class="c-button c-button__filled c-button__filled--secondary c-button--lg" type="button" aria-label="Size lg" data-uid="6a44efe809c77" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Size lg</span></span></button>
</div>
@group(['classList' => ['u-width--100']])
@field(['size' => 'sm'])@endfield
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm'
])
@endbutton
@endgroup
@group(['classList' => ['u-width--100']])
@field(['size' => 'md'])@endfield
@button([
'color' => 'secondary',
'size' => 'md',
'text' => 'Size md'
])
@endbutton
@endgroup
@group(['classList' => ['u-width--100']])
@field(['size' => 'lg'])@endfield
@button([
'color' => 'secondary',
'size' => 'lg',
'text' => 'Size lg'
])
@endbutton
@endgroup
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" type="button" aria-label="Size sm" data-uid="6a44efe809dc7" data-component="button"><span class=
"c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" type="button" aria-label="Size md" data-uid="6a44efe809e8e" data-component=
"button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" type="button" aria-label=
"Size lg" data-uid="6a44efe809f3d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></span> <span class=
"c-button__label-text c-button__label-text--reverse">Size lg</span></span></button>
@button([
'color' => 'secondary',
'size' => 'sm',
'text' => 'Size sm',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton
@button([
'color' => 'secondary',
'size' => 'md',
'text' => 'Size md',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton
@button([
'color' => 'secondary',
'size' => 'lg',
'text' => 'Size lg',
'icon' => 'home',
'reversePositions' => 'true'
])
@endbutton
Disabled buttons
A button with the data-attribute disabled set to true will be greyed out and cursor set to not-allowed.
Disabled
Disabled
Disabled
Disabled outlined
Disabled outlined
Disabled outlined
Disabled filled
Disabled filled
Disabled filled
<button class="c-button c-button__basic c-button__basic--default c-button--md" js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled" data-uid="6a44efe80a0e4" data-component=
"button"><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--primary c-button--md"
js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled" data-uid="6a44efe80a14b" data-component="button"><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--secondary c-button--md" js-toggle-trigger="" disabled="disabled" type="button"
aria-label="Disabled" data-uid="6a44efe80a1a3" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Disabled</span></span></button> <button class=
"c-button c-button__outlined c-button__outlined--default c-button--md" js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled outlined" data-uid="6a44efe80a203" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Disabled outlined</span></span></button> <button class="c-button c-button__outlined c-button__outlined--primary c-button--md"
js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled outlined" data-uid="6a44efe80a253" data-component="button"><span class="c-button__label"><span class=
"c-button__label-text">Disabled outlined</span></span></button> <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md" js-toggle-trigger="" disabled="disabled" type=
"button" aria-label="Disabled outlined" data-uid="6a44efe80a2a1" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Disabled outlined</span></span></button>
<button class="c-button c-button__filled c-button__filled--default c-button--md" js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled filled" data-uid="6a44efe80a2ed"
data-component="button"><span class="c-button__label"><span class="c-button__label-text">Disabled filled</span></span></button> <button class=
"c-button c-button__filled c-button__filled--primary c-button--md" js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled filled" data-uid="6a44efe80a338" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Disabled filled</span></span></button> <button class="c-button c-button__filled c-button__filled--secondary c-button--md"
js-toggle-trigger="" disabled="disabled" type="button" aria-label="Disabled filled" data-uid="6a44efe80a383" data-component="button"><span class="c-button__label"><span class=
"c-button__label-text">Disabled filled</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md c-button--icon-only" disabled="disabled" aria-label="close"
type="button" data-uid="6a44efe80a3d1" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--primary c-button--md c-button--icon-only" disabled="disabled" aria-label="close" type="button" data-uid=
"6a44efe80a481" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button--icon-only" disabled="disabled" aria-label="close" type="button" data-uid=
"6a44efe80a529" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button>
@button([
'style' => 'basic',
'text' => 'Disabled',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'basic',
'text' => 'Disabled',
'color' => 'primary',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'basic',
'text' => 'Disabled',
'color' => 'secondary',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'outlined',
'text' => 'Disabled outlined',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'outlined',
'color' => 'primary',
'text' => 'Disabled outlined',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'outlined',
'color' => 'secondary',
'text' => 'Disabled outlined',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'filled',
'text' => 'Disabled filled',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'filled',
'color' => 'primary',
'text' => 'Disabled filled',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'filled',
'color' => 'secondary',
'text' => 'Disabled filled',
'attributeList' => ['js-toggle-trigger' => '', 'disabled' => '']
])
@endbutton
@button([
'style' => 'basic',
'icon' => 'close',
'attributeList' => ['disabled' => ''],
'size' => 'md'
])
@endbutton
@button([
'style' => 'basic',
'icon' => 'close',
'color' => 'primary',
'attributeList' => ['disabled' => ''],
'size' => 'md'
])
@endbutton
@button([
'style' => 'basic',
'icon' => 'close',
'color' => 'secondary',
'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
<p class="c-typography c-typography__variant--h3" data-uid="6a44efe80a6cd" data-component="typography">
Basic buttons
</p><button class="c-button c-button__basic c-button__basic--primary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_left" type="button" data-uid=
"6a44efe80a73d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--secondary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_center"
type="button" data-uid="6a44efe80a800" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--default c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_right" type=
"button" data-uid="6a44efe80a8b5" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="6a44efe80a95c" data-component="typography">
Filled buttons
</p><button class="c-button c-button__filled c-button__filled--primary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_left" type="button" data-uid=
"6a44efe80a9bf" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--secondary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_center"
type="button" data-uid="6a44efe80aa70" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--default c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_right"
type="button" data-uid="6a44efe80ab1e" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <!-- typography.blade.php original: p -->
<p class="c-typography c-typography__variant--h3" data-uid="6a44efe80abbf" data-component="typography">
Outline buttons
</p><button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_left" type="button"
data-uid="6a44efe80ac14" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--secondary c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label=
"format_align_center" type="button" data-uid="6a44efe80acc2" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--default c-button--md c-button__toggle c-button--icon-only" aria-pressed="false" aria-label="format_align_right"
type="button" data-uid="6a44efe80ad77" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</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
Click me!
Open
Click me!
Open
Click me!
Open
<p class="c-typography c-typography__variant--h3" data-uid="6a44efe80af22" data-component="typography">
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" data-toggle-icon="close" aria-pressed="false" aria-label="format_align_left"
type="button" data-uid="6a44efe80af95" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__basic c-button__basic--primary c-button--md c-button__toggle" data-toggle-label="Close" aria-pressed="false" type="button" aria-label=
"Click me!" data-uid="6a44efe80b056" data-component="button"><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" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open" data-uid=
"6a44efe80b0b2" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" data-toggle-icon="close" aria-pressed="false" aria-label="format_align_left"
type="button" data-uid="6a44efe80b176" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__filled c-button__filled--primary c-button--md c-button__toggle" data-toggle-label="Close" aria-pressed="false" type="button" aria-label=
"Click me!" data-uid="6a44efe80b229" data-component="button"><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" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open"
data-uid="6a44efe80b282" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" data-toggle-icon="close" aria-pressed="false" aria-label=
"format_align_left" type="button" data-uid="6a44efe80b335" data-component="button"><span class="c-button__label"><span class="c-button__label-icon"><!-- icon.blade.php -->
</span></span></button> <button class="c-button c-button__outlined c-button__outlined--primary c-button--md c-button__toggle" data-toggle-label="Close" aria-pressed="false" type="button"
aria-label="Click me!" data-uid="6a44efe80b3e2" data-component="button"><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" data-toggle-label="Close" data-toggle-icon="close" aria-pressed="false" type="button" aria-label="Open"
data-uid="6a44efe80b43a" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php --></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" type="submit" aria-label="Submit" data-uid="6a44efe80b59a" data-component="button"><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" type="button" aria-label=
"Secondary" data-uid="6a44efe80b5f9" data-component="button"><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" type="reset" aria-label="Default" data-uid="6a44efe80b64a" data-component="button"><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
Pill-shaped buttons
By setting the pill attribute to true, the button will have a border-radius of 9999px, making it pill-shaped.
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;">
<a class="c-button u-margin--0 c-button__basic c-button__basic--primary c-button--md c-button--pill" href="https://getmunicipio.com" target="_top" aria-label="Primary (href)" data-uid=
"6a44efe80b793" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Primary (href)</span></span></a> <button class=
"c-button u-margin--0 c-button__basic c-button__basic--secondary c-button--md c-button--pill" type="button" aria-label="Secondary" data-uid="6a44efe80b7fb" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Secondary</span></span></button> <button class="c-button u-margin--0 c-button__basic c-button__basic--default c-button--md c-button--pill" type=
"button" aria-label="Default" data-uid="6a44efe80b852" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Default</span></span></button> <a class=
"c-button u-margin--0 c-button__basic c-button__basic--primary c-button--md c-button--pill c-button--icon-only" aria-label="home" href="https://getmunicipio.com" target="_top" data-uid=
"6a44efe80b8aa" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
</span></span></a>
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;">
<a class="c-button u-margin--0 c-button__outlined c-button__outlined--primary c-button--md c-button--pill" href="https://getmunicipio.com" target="_top" aria-label="Primary (href)" data-uid=
"6a44efe80b973" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Primary (href)</span></span></a> <button class=
"c-button u-margin--0 c-button__outlined c-button__outlined--secondary c-button--md c-button--pill" type="button" aria-label="Secondary" data-uid="6a44efe80b9c9" data-component=
"button"><span class="c-button__label"><span class="c-button__label-text">Secondary</span></span></button> <button class=
"c-button u-margin--0 c-button__outlined c-button__outlined--default c-button--md c-button--pill" type="button" aria-label="Default" data-uid="6a44efe80ba19" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Default</span></span></button> <a class=
"c-button u-margin--0 c-button__outlined c-button__outlined--primary c-button--md c-button--pill c-button--icon-only" aria-label="home" href="https://getmunicipio.com" target="_top" data-uid=
"6a44efe80ba6d" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
</span></span></a>
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;">
<a class="c-button u-margin--0 c-button__filled c-button__filled--primary c-button--md c-button--pill" href="https://getmunicipio.com" target="_top" aria-label="Primary (href)" data-uid=
"6a44efe80bb1f" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Primary (href)</span></span></a> <button class=
"c-button u-margin--0 c-button__filled c-button__filled--secondary c-button--md c-button--pill" type="button" aria-label="Secondary" data-uid="6a44efe80bb71" data-component="button"><span class=
"c-button__label"><span class="c-button__label-text">Secondary</span></span></button> <button class="c-button u-margin--0 c-button__filled c-button__filled--default c-button--md c-button--pill"
type="button" aria-label="Default" data-uid="6a44efe80bbbf" data-component="button"><span class="c-button__label"><span class="c-button__label-text">Default</span></span></button> <a class=
"c-button u-margin--0 c-button__filled c-button__filled--primary c-button--md c-button--pill c-button--icon-only" aria-label="home" href="https://getmunicipio.com" target="_top" data-uid=
"6a44efe80bc12" data-component="button"><span class="c-button__label"><span class="c-button__label-icon c-button__label-icon--reverse"><!-- icon.blade.php -->
</span></span></a>
</div>
@foreach(['basic', 'outlined', 'filled'] as $style)
<div style="display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 2rem;">
@button([
'text' => 'Primary (href)',
'color' => 'primary',
'style' => $style,
'href' => 'https://getmunicipio.com',
'shape' => 'pill',
'classList' => [
'u-margin--0'
]
])
@endbutton
@button([
'text' => 'Secondary',
'color' => 'secondary',
'style' => $style,
'shape' => 'pill',
'classList' => [
'u-margin--0'
]
])
@endbutton
@button([
'text' => 'Default',
'color' => 'default',
'style' => $style,
'shape' => 'pill',
'classList' => [
'u-margin--0'
]
])
@endbutton
@button([
'color' => 'primary',
'style' => $style,
'href' => 'https://getmunicipio.com',
'icon' => 'home',
'reversePositions' => 'true',
'shape' => 'pill',
'classList' => [
'u-margin--0'
]
])
@endbutton
</div>
@endforeach
API
Parameter
Default
Description
text
false
The text-content of a button.
size
md
The size of the button; sm, md, lg.
color
default
The color scheme for the button.
type
button
What button type.
style
filled
The type of appearance, can be basic, filled or outlined.
shape
normal
If the shape of the button should be normal, or fully rounded (pill style).
href
false
Where should the button link to?
target
_top
Open a new tab or not?
componentElement
button
The tag to use for this component.
labelElement
span
The element containing the label.
ripple
true
Enable / disable ripple on click.
pressed
false
-
toggle
false
Will toggle the color of the font.
icon
false
The name of the icon.
reversePositions
false
Reverse the position of icon and text.
fullWidth
false
Makes button full width.
classListIcon
[]
Array of classes placed on the icon
classListText
[]
Array of classes placed on the text
ariaLabel
Aria label text for the button
disableColor
true
To use or not to use the disabled color even if the button is disabled
CSS API
Variable
Default
Type
Values
Description
--c-button--base
var(--base)
range
-
Main unit that drives radius and spacing scales.
--c-button--border-radius
var(--border-radius)
range
-
Border Radius
--c-button--border-width
var(--border-width)
range
-
Size
--c-button--space
var(--space)
range
-
Base spacing unit. Used for padding and margin inside components.
--c-button--outer-space
var(--outer-space)
range
-
Spacing between components. Use --space for spacing inside components.
--c-button--color--primary
var(--color--primary)
color
-
Controls the background, text, border, hover, and active colors for primary buttons.
--c-button--color--secondary
var(--color--secondary)
color
-
Controls the background, text, border, hover, and active colors for secondary buttons.
--c-button--font-weight-medium
var(--font-weight-medium)
select
400, 500, 600, 700
Medium Weight
--c-button--font-family-base
var(--font-family-base)
font
-
Body Font
--c-button--color--surface-contrast
var(--color--surface-contrast)
color
-
Used for text and icons on surface backgrounds with less contrast.
--c-button--shadow-color
var(--shadow-color)
rgba
-
Shadow Color
--c-button--shadow-amount
var(--shadow-amount)
range
-
Multiplier for elevation shadows. 0 = none, 1 = default.
--c-button--color--primary-contrast
var(--color--primary-contrast)
color
-
Primary Contrast
--c-button--color--primary-border
var(--color--primary-border)
color
-
Manual companion token for primary border and hover states.
--c-button--color--secondary-contrast
var(--color--secondary-contrast)
color
-
Secondary Contrast
--c-button--color--secondary-border
var(--color--secondary-border)
color
-
Manual companion token for secondary border and hover states.
--c-button--color--surface-border
var(--color--surface-border)
color
-
Manual companion token for borders on surface elements.
--c-button--color--surface-alt
var(--color--surface-alt)
color
-
Manual companion token for subtle surface backgrounds.
--c-button--corner-shape
var(--corner-shape)
select
square, round, squircle, circular, bevel, scoop
Corner Shape
--c-button--font-size-90
var(--font-size-90)
range
-
One step below base in the type scale.
--c-button--font-size-100
var(--font-size-100)
range
-
Base font size.
--c-button--font-size-200
var(--font-size-200)
range
-
One step above base in the type scale. Equivalent to h6/subtitle.
