Thinkport

Dolor sit amet

Consetetur sadipscing

Button

Schaltflächen-Komponente

Die Button-Komponente bietet verschiedene Varianten von Schaltflächen für Interaktionen und unterstützt unterschiedliche Stile, Icons sowie die Nutzung als Button oder Link.

Codebeispiel

<Button variant="primary" text="Lorem ipsum" icon="tabler:arrow-right" type="button" />
<Button variant="secondary" href="/kontakt" target="_blank">Dolor sit amet</Button>
<Button variant="unicorn" icon="tabler:sparkles">Consetetur sadipscing</Button>
<Button
    variant="link"
    icon="tabler:external-link"
    text="Sed diam nonumy"
    href="https://www.example.com"
    target="_blank"
  />

Parameter

Bezeichner	Typ	Beschreibung	Default
variant	"primary" \| "secondary" \| "tertiary" \| "link" \| "unicorn"	Bestimmt das Aussehen des Buttons	'secondary'
text	string	Button-Text. Alternativ kann der Default-Slot verwendet werden.	''
icon	string	Name des Icons (z.B. tabler:star)	''
type	"button" \| "submit" \| "reset"	Button-Typ (nur für <button>)	undefined
href	string	Wenn gesetzt, wird ein Link (<a>) statt eines Buttons gerendert	undefined
target	string	Ziel für Links, z.B. _blank	undefined
class	string	Zusätzliche CSS-Klassen	''

Fragments

Bezeichner	Beschreibung	Default
default	Standardinhalt des Buttons. Überschreibt das text-Prop, falls gesetzt.

Wiki-Dokumentation Quellcode