Button Component

Die Schaltflächenkomponente bietet ein übersichtliches, zugängliches Schaltflächenelement, das mit verschiedenen Varianten entsprechend Ihren Designanforderungen gestaltet werden kann.

Props

Prop	Type	Required	Description
label	Zeichenfolge	Ja	Der auf der Schaltfläche
link	Zeichenfolge	Ja	Die URL, zu der die Schaltfläche
variant	string	No	Style variant (primary, secondary, outline, etc.)

Features

• Mehrere Varianten – Verschiedene visuelle Stile für verschiedene Anwendungsfälle
• Accessible Links - Properly structured anchor elements
• Responsive Design - Adapts to different screen sizes
• Benutzerdefiniertes Styling – Einfache Erweiterung mit zusätzlichen CSS-Klassen
• Semantisches HTML – Verwendet geeignete Linkelemente für die Navigation

Usage Examples

Primary Button

import Button from "../../../../components/user-components/Button.astro";

<Button
  label="Loslegen"
  link="/getting-started"
  variant="primary"
/>

Secondary Button

import Button from "../../../../components/user-components/Button.astro";

<Button
  label="Mehr erfahren"
  link="/docs"
  variant="secondary"
/>

Outline Button

import Button from "../../../../components/user-components/Button.astro";

<Button
  label="View Source"
  link="https://github.com/your-repo"
  variant="outline"
/>

Multiple Buttons

import Button from "../../../../components/user-components/Button.astro";

<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
  <Button
    label="Download"
    link="/download"
    variant="primary"
  />
  <Button
    label="Documentation"
    link="/docs"
    variant="secondary"
  />
  <Button
    label="GitHub"
    link="https://github.com/your-repo"
    variant="outline"
  />
</div>

Available Variants

Die Komponente unterstützt verschiedene Schaltflächenstile über die variant-Requisite:

• primary - Main call-to-action styling
• secondary - Secondary action styling
• outline - Outlined button style
• Ghost – Minimales Styling mit Hover-Effekten
• Gefahr – Für destruktive oder warnende Aktionen

Styling

Schaltflächen erben den Stil von den Schaltflächen-CSS-Klassen des Themes:

• .btn - Base button styles
• .btn-primary - Primary variant styles
• .btn-secondary - Secondary variant styles
• .btn-outline - Outline variant styles

Best Practices

• Use clear, action-oriented labels
• Choose appropriate variants based on button importance
• Sorgen Sie für einen ausreichenden Farbkontrast für die Barrierefreiheit
• Test button functionality across different devices
• Verwenden Sie externe Links für externe URLs und interne Links für die Site-Navigation