IconButton

A circle with an icon, a required name, and a tooltip that says it.

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

Props

  • aria-label
    string

    The accessible name, also shown as the tooltip. Required.

  • disabledReason
    string

    Why it is disabled, shown as a tooltip; it stays focusable so people can read it.

  • href
    string

    Makes it a link to this address.

  • icon
    IconSvgElement

    The icon; give the button an aria-label.

  • loading
    boolean

    Shows that work is underway and ignores clicks until it ends.

  • shortcut
    string[] | string[][]

    A shortcut shown in the tooltip.

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

    The diameter, from xs (24px) to xl (44px).

  • tooltip
    boolean = true

    Turn the tooltip off (rare: when a visible label sits next to it).

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

    Where the tooltip with its name appears.

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

    The look, as on Button.