IconButton

Square, icon-only button with the same variants, sizes, focus ring and touch density as Button. The control grows with data-density="touch" because its box is the Button height.

Import

import { IconButton } from "@jcsoftdev/ui/atoms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/atoms/icon-button.

Usage

<IconButton label="Delete row">
  <Trash aria-hidden="true" />
</IconButton>

Props

Prop	Type	Default	Description
label *	string		Accessible name, announced in place of the icon. Required: an icon alone names nothing.
variant	"danger" | "primary" | "secondary" | "ghost"	"secondary"
size	"sm" | "md" | "lg"	"md"
loading	boolean		Swaps the icon for a spinner and makes the button busy like Button loading: it keeps focus, ignores clicks and announces the localized loading string.
asChild	boolean		Render the child element (via Slot) instead of a <button>, e.g. a link wrapping the icon.
children *	ReactNode		The icon (an svg, an Icon, or any element). It is decorative: label names the button.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Variants And Sizes
• Loading
• Disabled

Source

packages/ui/src/atoms/icon-button/icon-button.tsx