tuix-button

tuix-button ist der Aktions-Button des Design Systems. Er rendert einen echten <button> in seinem Shadow Root, nimmt die Beschriftung aus dem Default-Slot und meldet Klicks als Event customClick.

Varianten

variant bestimmt die Gewichtung. Es gibt zwei, und es sind dieselben zwei wie bei jedem Button und Link im System.

Primary

Gefüllt in der Markenfarbe. Einer pro Ansicht: die Aktion, für die die Seite da ist.

Secondary

Mit Kontur. Alles neben einem Primary-Button: Abbrechen, Zurück, sekundäre Aktionen.

Mit Icons

iconLeft und iconRight nehmen jeden Icon-Namen. Die Farbe des Icons ist nicht einstellbar: sie folgt der Beschriftung, auch beim Hover, damit der Button in beiden Varianten lesbar bleibt.

Icons rendern mit 24px und fallen unterhalb des Tablet-Breakpoints auf 16px.

Zustände

Disabled

disabled graut den Button aus und verhindert, dass customClick feuert.

Volle Breite

full streckt den Button auf die Breite seines Containers, die übliche Wahl auf Mobile und in schmalen Formularen.

Dark

Jede Komponente ausser tuix-table hat eine Property dark, statt ein globales Theme zu lesen. Die Vorschauen dieser Seite folgen dem Theme, ein Wechsel in der Seitenleiste zeigt also die dunkle Palette.

Klicks

document.querySelector('tuix-button').addEventListener('customClick', save)

API

Properties

variant, disabled, dark und full werden auf das Attribut gespiegelt, lassen sich also von aussen stylen und inspizieren. iconLeft und iconRight nicht: sie werden vom Attribut gelesen, aber nie zurückgeschrieben.

Events

Slots

Im Framework

Jedes Beispiel auf dieser Seite wird über die Tabs darüber in Angular, Vue oder React gezeigt. Der vollständige Aufbau je Framework: React und Next.js, Vue, Angular.