Compact Button

Überblick

mmm-compact-button kombiniert ein Icon mit einem optionalen Label. Die Komponente eignet sich für kompakte Aktionen, Quick-Actions oder Icon-gestützte Navigationselemente.

Varianten

primary
secondary

Layoutvarianten

vertical
horizontal

Inputs

Input	Typ	Beschreibung
`label`	`string \| null`	Sichtbares Label unter oder neben dem Icon
`ariaLabel`	`string \| null`	Alternativer Screenreader-Text
`variant`	`‘primary'	'secondary’`
`orientation`	`‘vertical'	'horizontal’`
`disabled`	`boolean`	Deaktiviert die Aktion

Outputs

Die Komponente definiert keine eigenen Outputs. Interaktionen erfolgen in der Regel über den nativen (click).

Inhalt und Icons

Das Icon wird über projizierten Text übergeben, zum Beispiel ultra:chevron_rechts_16.

SCSS-Variablen

Wichtige Variablen:

--mmm-compact-button-gap
--mmm-compact-button-gap-horizontal
--mmm-compact-button-border-radius
--mmm-compact-button-icon-wrapper-size
--mmm-compact-button-icon-wrapper-radius
--mmm-compact-button-icon-size
--mmm-compact-button-label-font-size
--mmm-compact-button-focus-outline-width
--mmm-compact-button-focus-outline-offset

Beispiel

<mmm-compact-button
  label="Weiter"
  variant="primary"
  orientation="horizontal"
>
  ultra:chevron_rechts_16
</mmm-compact-button>