Button

WARNING

Use the <button> tag for interactive elements and <a href="#"> for navigation. The HTML Button element comes with lots of inbuilt functionality, like submitting forms, which can be disabled with type="button". Using an HTML button means it can be reached by the tab key and activated with both a mouse and a keyboard automatically just by adding an onclick event.

See also accessibleweb.dev/buttons.

TIP

Use the keyboard Tab key to navigate through the buttons and show the :focus-visible state.

Default Button

.-c-btn

<button class="c-btn">Button</button>

Button Styles

Primary Color Styles

<button class="c-btn -small -primary">-primary</button>
<button class="c-btn -small -primary-outline">-primary-outline</button>
<button class="c-btn -small -primarylight">-primarylight</button>

Secondary Color Styles

<button class="c-btn -small -secondary">-secondary</button>
<button class="c-btn -small -secondary-outline">-secondary-outline</button>

Other Styles

<button class="c-btn -small -light">-light</button>
<button class="c-btn -small -inverted">-inverted</button>
<button class="c-btn -small -link">-link</button>
<button class="c-btn -small -link -flat">-link -flat</button>

Button States

.-c-btn[.-success, .-warning, .-error]

-success-warning-error

Show Code

  <a href="" class="c-btn -success">-success</a>
  <a href="" class="c-btn -warning">-warning</a>
  <a href="" class="c-btn -error">-error</a>

Button Modifiers

TIP

See general Helper Classes for more examples.

.c-btn[.-small, .h-fullwidth.h-block]

Show Code

<button type="button" class="c-btn -small">-small</button>
<button type="button" class="c-btn -small h-fullwidth h-block m-t-m">
  <span class="c-btn__text">h-fullwidth h-block</span>
</button>

Button with Inline Icons

WARNING

Icons are only for decoration and should be hidden by adding the attribute aria-hidden="true, see Accessibility Helper Classes.

.c-btn[.-icon-right,.-icon-left] > i.fas.fa-lock

Show Code

<button class="c-btn -small -inverted -icon-right">
-icon-right
<i class="fas fa-lock" aria-hidden="true"></i>
</button>
<button class="c-btn -small -inverted -icon-left">
<i class="fas fa-lock" aria-hidden="true"></i>
-icon-left
</button>

Arrow Icons per Class

.-icon-right[-icon-left, -icon-up, -icon-down].-icon-arrow

Show Code

<button class="c-btn -small -secondary -icon-right -icon-arrow">
  -icon-right -icon-arrow
</button>
<button class="c-btn -small -primary -icon-left -icon-arrow">
  -icon-right -icon-arrow
</button>
<button class="c-btn -small -secondary -icon-up -icon-arrow">
-icon-up -icon-arrow
</button>
<button class="c-btn -small -primary -icon-down -icon-arrow">
-icon-down -icon-arrow
</button>

Dropdown Button

.c-btn.-dropdown

Show Code

<div class="h-flex h-space-around h-flex-row h-vertical-center">
    <button class="c-btn -small -secondary -dropdown">
        <span class="c-btn__text">-dropdown</span>
    </button>
    <button class="c-btn -small -dropdown -icon-left">
        <span class="fas fa-user-circle fa-2x" aria-hidden="true"></span>
        <span class="c-btn__text">-dropdown -icon-left</span>
    </button>
    <button class="c-btn -small -secondary-outline -dropdown -icon-left">
      <span class="fa-stack h-pos-absolute h-absolute-vertical-center" aria-hidden="true" style="margin-left: -2.5rem; font-size: 0.875rem">
          <i class="fa-solid fa-circle fa-stack-2x fa-inverse"></i>
          <i class="fa-solid fa-user-tie fa-stack-1x h-color-white h-absolute-vertical-center"></i>
      </span>
        <span class="c-btn__text h-overflow-ellipsis h-inline-block" style="max-width: 260px; line-height: inherit;">
          pharma4u-langertestname-ellipsis@pharma4u.de
      </span>
    </button>
</div>

Dropdown-Filter Button

.c-btn.-dropdown.-filter

Show Code

<button
  type="button"
  class="c-btn -primarylight -dropdown -filter -icon-left"
  role="tab"
  data-toggle="collapse"
  data-target="#"
  aria-controls="..."
>
  <i class="fa fa-sliders-h" aria-hidden="true"></i>
  Filtern
</button>

Disabled Button

TIP

For accessibility reasons, it is recommended to use the disabled attribute instead of the .c-btn.-disabled class.

Show Code

<div class="h-flex h-space-around h-flex-row h-wrap h-start gap-xs">
    <button type="button" class="c-btn -small -disabled">
        c-btn -disabled
    </button>
    <button type="button" class="c-btn -small -light -icon-arrow -icon-right" disabled>
        -light[disabled]
    </button>
    <button type="button" class="c-btn -small -primary-outline" disabled>
        -primary-outline
    </button>
    <button type="button" class="c-btn -small -primary-outline" disabled>
        -secondary-outline
    </button>
    <button type="button" class="c-btn -small -inverted" disabled>
        -inverted
    </button>
    <button type="button" class="c-btn -small -link -icon-left" disabled>
        <span class="fas fa-user-circle" aria-hidden="true"></span>
        -link
    </button>
</div>

Icon Button

WARNING

It gets its accessible name from the text between the opening and closing button tags. If your text clearly explains the button's purpose then this is an accessible button.

If you use an icon-only button, you should add a visually hidden text for screen readers with the class .h-sr-only, see Accessibility Helper Classes.

Sizes

.c-btn.-icon-btn[.-small, .-medium, .-large]

Show Code

  <button type="button" class="c-btn -icon-btn -small">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -medium">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -large">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>

Styles

.c-btn.-icon-btn[.-light, .-inverted, .-primary, .-secondary .-primarylight, .-link, .-link.-flat, -disabled ...]

Show Code

  <button type="button" class="c-btn -icon-btn -light">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -primary">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -secondary">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -primarylight">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -link">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -link -flat">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>
  <button type="button" class="c-btn -icon-btn -disabled">
    <span class="fa fa-star" aria-hidden="true"></span>
    <span class="h-sr-only">Stern vergeben</span>
  </button>

Icon-Square Button

TIP

Has the sames Modifier Classes for Size and Color as the Icon Btn. Just use .-square-btn instead of .-icon-btn.

.c-btn.-square-btn[.-small, .-medium, .-large]

.c-btn.-square-btn[.-light, .-inverted, .-primary, .-secondary .-primarylight, .-link, .-link.-flat, -disabled ...]

Examples

Show Code

<div class="h-flex h-space-between h-flex-row h-vertical-center">
  <button type="button" class="c-btn -square-btn -medium -inverted">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -large">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -primarylight">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -link">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -link -flat">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -medium -secondary">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
  <button type="button" class="c-btn -square-btn -large -disabled">
    <span class="fa fa-save" aria-hidden="true"></span>
    <span class="h-sr-only">Speichern</span>
  </button>
</div>

Icon-Button State Colors

c-btn.-icon-btn.-square[.-success, .-warning, .-error]

Show Code

  <button type="button" class="c-btn -square-btn -success">
    <span class="fa fa-check" aria-hidden="true"></span>
    <span class="h-sr-only">Eingabe bestätigen</span>
  </button>
  <button type="button" class="c-btn -square-btn -warning">
    <span class="fa fa-exclamation" aria-hidden="true"></span>
    <span class="h-sr-only">Warnung</span>
  </button>
  <button type="button" class="c-btn -square-btn -error">
    <span class="fa fa-times" aria-hidden="true"></span>
    <span class="h-sr-only">Fehler</span>
  </button>

Action Button

TIP

• Based on the Icon Btn
• Used in Action Menu.

c-btn.-icon-btn[any modifier] > .fa-ellipsis-v/.fa-ellipsis-h

Show Code

<button type="button" class="c-btn  -icon-btn -inverted">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
</button>
<button type="button" class="c-btn  -icon-btn -inverted">
    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
</button>
<button type="button" class="c-btn  -icon-btn -medium -link">
    <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
</button>
<button type="button" class="c-btn  -icon-btn -secondary -small">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
</button>
<button type="button" class="c-btn  -icon-btn -secondary -large">
    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
    <span class="h-sr-only">Menu</span>
</button>