Button

Display a button in one of for semantic variants (eg. destructive for deletion), three different sizes and optional leading and/or trailing icons.

Create icon buttons by (visually) hiding the label. Render pill-shaped buttons of variants and sizes with the round property.

Add a href attribute to render the component as an achor tag. The default component tag is button.

'variant' => 'secondary', // primary | secondary | tertiary | destructive
'size' => 'md', // sm | md | lg
'iconLeft' => false,
'iconRight' => false,
'label' => 'Label',
'hideLabel' => false,
'round' => false,
<x-button size="sm" label="Okay" />
<x-button size="md" label="Okay" />
<x-button size="lg" label="Okay" />
<x-button variant="secondary" label="Okay" />
<x-button variant="primary" label="Speichern" />
<x-button variant="tertiary" label="Abbrechen" />
<x-button variant="destructive" label="Löschen" />
<x-button icon-left="tabler-arrow-left" label="Zurück" />
<x-button icon-right="tabler-arrow-right" label="Weiter" />
<x-button icon-right="tabler-pencil" label="Bearbeiten" hide-label />
<x-button icon-right="tabler-eye" label="Vorschau" hide-label />
<x-button icon-right="tabler-trash" variant="destructive" label="Löschen" hide-label />
<x-button icon-right="tabler-x" label="Schliessen" hide-label round />
Auf Mastodon folgen 
<x-button variant="primary" icon-left="tabler-brand-mastodon" label="Auf Mastodon folgen" href="https://joinmastodon.org/de" />