Was macht die Komponente?

Ein Mini-Button ist ein interaktives Element, das eine Aktion auslöst, wenn er angeklickt wird.

Wann soll die Komponente eingesetzt werden?

• Nur in Ausnahmefällen, wenn die Platzverhältnisse keinen normalen Button zulassen. Beispielsweise in Form-Fields.

Verwandte Komponenten

Beispiele

The sbb-mini-button component provides the same functionality as a native icon-only <button> enhanced with the SBB Design.
It's mainly designed to be used within the sbb-form-field
in the prefix or suffix slot.

<sbb-mini-button icon-name="pen-small"></sbb-mini-button>

<sbb-form-field>
  <input />
  <sbb-mini-button slot="prefix" icon-name="pen-small"></sbb-mini-button>
</sbb-form-field>

Slots

The component can display a sbb-icon using the iconName property or via custom content using the icon slot.

<sbb-mini-button icon-name="info" aria-label="Click for more information."></sbb-mini-button>

<sbb-mini-button aria-label="Click for more information.">
  <sbb-icon slot="icon" name="info"></sbb-icon>
</sbb-mini-button>

Button properties

The component is internally rendered as a button,
accepting its associated properties (type, name, value and form).

<sbb-form-field>
  <label>Tickets</label>
  <input placeholder="Insert the number of tickets you want to purchase." />
  <sbb-mini-button
    slot="suffix"
    icon-name="coins-small"
    type="button"
    name="tickets"
    form="buy"
    value="tickets"
  ></sbb-mini-button>
</sbb-form-field>

Style

The component has a negative variant which can be set using the negative property.

The component can be displayed in disabled state using the self-named property.

<sbb-mini-button icon-name="pie-small" negative></sbb-mini-button>

<sbb-mini-button icon-name="pie-small" disabled></sbb-mini-button>

Focus outline

Please make sure that the focus outline appears in the correct color if the component is used on a dark background.
You can set it by re-defining the css var on sbb-mini-button or any parent element:

sbb-mini-button {
  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
}

Accessibility

Use the accessibility properties to describe the purpose of the sbb-mini-button for screen-reader users.

Properties

Slots