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.

Primary (href)

<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-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-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-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.

Primary outlined

<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-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-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-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.

Primary filled

<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-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-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-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.

Primary full width

Primary full width (ico)

<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-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-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-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-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-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-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.

<button class="c-button c-button__basic c-button__basic--default c-button--sm" type="button" aria-label="Reversed" 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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-component="group">
  <!-- field.blade.php -->
  <div class="c-field c-field--text c-field--sm c-field--radius-md" id="id_6aaefb77187eb" data-component="field">
    <div class="c-field__inner c-field__inner--text">
      <input id="input_id_6aaefb77187eb" 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-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-component="group">
  <!-- field.blade.php -->
  <div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6aaefb7718c4c" data-component="field">
    <div class="c-field__inner c-field__inner--text">
      <input id="input_id_6aaefb7718c4c" 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-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-component="group">
  <!-- field.blade.php -->
  <div class="c-field c-field--text c-field--lg c-field--radius-md" id="id_6aaefb771902c" data-component="field">
    <div class="c-field__inner c-field__inner--text">
      <input id="input_id_6aaefb771902c" 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-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-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-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-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.

<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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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

<p class="c-typography c-typography__variant--h3" data-component="typography">
  Toggle buttons with interchangable labels &amp; 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-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-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-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-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-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-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-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-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-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-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-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-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.

Primary (href)

<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-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-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-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-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-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-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-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-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-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-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-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-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	Type	Description
text	null	?string	The visible label.
size	md	string	The button size.
color	default	string	The button color scheme.
type	button	string	The HTML button type.
style	filled	string	The visual button style.
shape	normal	string	The visual button shape.
href	null	?string	The optional link target.
target	_top	string	The link target attribute.
componentElement	button	string	The rendered wrapper element.
labelElement	span	string	The element used around the label.
ripple	true	boolean	Whether the ripple effect is enabled.
pressed	false	string\|boolean	The pressed state value.
toggle	false	boolean	Whether the button behaves like a toggle.
icon	null	?string	The optional icon name.
reversePositions	false	boolean	Whether icon and text positions are reversed.
fullWidth	false	boolean	Whether the button should stretch to full width.
classListIcon	[]	array	Extra icon classes.
classListText	[]	array	Extra text classes.
ariaLabel		string	The aria-label value.
disableColor	true	boolean	Whether disabled color handling is active.

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	100, 200, 300, 400, 500, 600, 700, 800, 900	Medium Weight
--c-button--font-family-base	var(--font-family-base)	font	-	Body Font
--c-button--color--surface	var(--color--surface)	color	-	Controls the background, text, border, hover, and active colors for default buttons.
--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.

Similar components

Option Box Testimonials