Button

Überblick

mmm-button ist der generische Aktions-Button des Designsystems. Die Komponente unterstützt Varianten, Größen, Breiten sowie Start- und End-Icons.

Varianten

• primary: primäre Aktion
• secondary: sekundäre Aktion mit Kontur
• tertiary: reduzierte Aktion ohne sichtbare Kontur

Inputs

Input	Typ	Beschreibung
variant	primary secondary tertiary	Visuelle Variante des Buttons
size	sm md	Größe des Buttons
width	fixed flex full	Breitenverhalten des Buttons
type	button submit reset	Nativer Button-Typ
disabled	boolean	Deaktiviert den Button
iconOnly	boolean	Rendert den Button ausschließlich als Icon-Button
responsiveIconOnly	boolean	Versteckt das Label auf kleinen Viewports und zeigt nur das Icon
ariaLabel	string undefined	Screenreader-Label, insbesondere für iconOnly
startIcon	string undefined	Icon-Key vor dem Label
endIcon	string undefined	Icon-Key nach dem Label

Outputs

Die Komponente definiert keine eigenen Outputs. Interaktionen laufen in der Regel über den nativen (click)-Handler auf dem Host.

SCSS-Variablen

Wichtige Variablen:

• --mmm-button-min-width
• --mmm-button-padding
• --mmm-button-border-radius
• --mmm-button-size-sm-height
• --mmm-button-size-md-height
• --mmm-button-size-sm-font-size
• --mmm-button-size-md-font-size
• --mmm-button-primary-disabled-opacity
• --mmm-button-secondary-disabled-opacity
• --mmm-button-tertiary-disabled-opacity

Hinweise

• Für iconOnly sollte immer ein sinnvolles ariaLabel gesetzt werden.
• startIcon und endIcon erwarten einen registrierten Icon-Key, zum Beispiel speichern_24.
• width="full" belegt die komplette verfügbare Breite des Containers.

Beispiel

Preview HTML

Primary standortfreigabe_24 Secondary Tertiary anmelden_24ausrufezeichen_mit_kreis_24 Flexibel Width ausrufezeichen_mit_kreis_24apartment_24

  <div style="display:flex; gap: 1rem; flex-wrap: wrap;">
    <mmm-button variant="primary">
      Primary
    </mmm-button>

    <mmm-button variant="secondary" startIcon="standortfreigabe_24">
      Secondary
    </mmm-button>

    <mmm-button variant="tertiary" endIcon="anmelden_24">
      Tertiary
    </mmm-button>

    <mmm-button
      variant="primary"
      width="flex"
      startIcon="ausrufezeichen_mit_kreis_24"
      endIcon="ausrufezeichen_mit_kreis_24"
    >
      Flexibel Width
    </mmm-button>

    <mmm-button
      variant="primary"
      [iconOnly]="true"
      ariaLabel="Weiter"
      startIcon="apartment_24"
    ></mmm-button>
  </div>