IconButton

Ein Kreis mit Symbol, einem Pflichtnamen und einem Tooltip, der ihn nennt.

Quelltext
import { IconButton } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    Der zugängliche Name, zugleich der Tooltip. Pflicht.

  • disabledReason
    string

    Warum es deaktiviert ist, als Tooltip gezeigt; es bleibt fokussierbar, damit man den Grund lesen kann.

  • href
    string

    Macht es zu einem Link auf diese Adresse.

  • icon
    IconSvgElement

    Das Symbol; dem Button ein aria-label geben.

  • loading
    boolean

    Zeigt, dass gearbeitet wird, und ignoriert Klicks, bis die Arbeit endet.

  • shortcut
    string[] | string[][]

    Ein Tastenkürzel im Tooltip.

  • size
    "md" | "xs" | "sm" | "lg" | "xl" = sm

    Der Durchmesser, von xs (24px) bis xl (44px).

  • tooltip
    boolean = true

    Den Tooltip abschalten (selten: wenn eine sichtbare Beschriftung danebensteht).

  • tooltipSide
    "top" | "bottom" | "left" | "right" = top

    Wo der Tooltip mit seinem Namen erscheint.

  • variant
    "danger" | "secondary" | "primary" | "ghost" | "quiet" | "soft" | "danger-secondary" = ghost

    Das Aussehen, wie bei Button.