icon-button

A square, icon-only button — every Button capability, plus a shape.

IconButton is a square, icon-only Button. It reuses every Button capability (variant, tone, size, glow, press state) and the active skin's treatment (Material state layer + ripple), and adds a shape. An aria-label is required.

Installation

pnpm add @fluixi-ui/icon-button

Usage

import { IconButton } from '@fluixi-ui/icon-button';

<IconButton aria-label="Edit"><PencilIcon /></IconButton>
<IconButton aria-label="Delete" tone="danger" variant="soft"><TrashIcon /></IconButton>
<IconButton aria-label="More" variant="ghost" shape="circle"><DotsIcon /></IconButton>
<IconButton aria-label="Add" size="lg"><PlusIcon /></IconButton>

Props

Everything from Button (variant, tone, size, glow, disabled, …) plus:

The button carries data-icon-button and data-shape; it sizes to a square per data-size. Under the Material skin it becomes a round state-layer button with a ripple, for free.

Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.