Einführung

Eine klickbare Komponente zum Auslösen von Aktionen und Benutzerinteraktionen. Umfasst Varianten für Symbole und gruppierte Schaltflächen.

Verwendung

Einfache Schaltfläche

import { Button } from "../components/ui";

export default function MyPage() {
  return (
    <Button variant="solid" colorPalette="blue">
      Click me
    </Button>
  );
}

Ladezustand

import { Button } from "../components/ui";

export default function MyPage() {
  return (
    <Button loading loadingText="Saving...">
      Save
    </Button>
  );
}

Symbol-Schaltfläche

Eine für Symbole optimierte Schaltfläche.

import { IconButton } from "../components/ui";
import { SearchIcon } from "./icons";

export default function MyPage() {
  return (
    <IconButton aria-label="Search">
      <SearchIcon />
    </IconButton>
  );
}

Schließen-Schaltfläche

Eine vorformatierte Schaltfläche zum Schließen von Elementen.

import { CloseButton } from "../components/ui";

export default function MyPage() {
  return <CloseButton onClick={() => console.log("closed")} interactive />;
}

Schaltflächengruppe

import { Button, ButtonGroup } from "../components/ui";

export default function MyPage() {
  return (
    <ButtonGroup attached>
      <Button>First</Button>
      <Button>Second</Button>
    </ButtonGroup>
  );
}

CMS-Seitenbauer

Diese Komponente ist als button-Block im Seitenbauer (content/pages/*.json) verfügbar:

{
  "type": "button",
  "text": "Click me",
  "variant": "solid",
  "colorPalette": "blue"
}

Eigenschaften

Schaltfläche

Eigenschaft	Typ	Beschreibung
children	any	Inhalt, der innerhalb der Komponente gerendert wird.
class	string	Benutzerdefinierte CSS-Klassen.

| variant | "solid" | "surface" | "subtle" | "outline" | "plain" | Der visuelle Stil der Schaltfläche. |

| size | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | Die Größe der Schaltfläche. |

| loading | boolean | Wenn true, zeigt die Schaltfläche einen Ladespinner an. | | loadingText | string | Der während des Ladevorgangs angezeigte Text. |

| type | "button" | "submit" | "reset" | Der HTML-Schaltflächentyp. |

| colorPalette | string | Das Farbschema der Schaltfläche. | | interactive | boolean | Legt fest, ob die clientseitige Hydration aktiviert wird. |

Schaltflächengruppe

Eigenschaft	Typ	Beschreibung
children	any	Zu gruppierende Schaltflächen.
attached	boolean	Legt fest, ob die Schaltflächen aneinandergehängt werden.