Components / actions

Icon Button

Square button with a single swappable icon and no visible label.

import { IconButton } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { IconButton } from '@basiiik/ui';

<IconButton icon={<CloseIcon />} aria-label="Close" />

• Example values were filled in for the required props icon, aria-label: replace them with your own.
• CloseIcon is a placeholder for your own icons or components; @basiiik/ui ships no icons.
• Hover, Pressed and Focused are CSS (:hover, :active, :focus-visible); Disabled uses the native disabled attribute.
• Storybook: Actions/Icon Button.

Props

States. Hover, Pressed and Focused are CSS (:hover, :active, :focus-visible); Disabled uses the native disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• Dense toolbars and repeated actions with a universally understood icon
• Close, menu and overflow controls

Do not use it when

• Ambiguous icons; use a labelled Button instead

Rules for agents

• Every IconButton has an aria-label that names the action, such as "Close" or "Delete file"; it is required
• Pass the icon in icon; it is decorative and hidden from assistive tech
• Use variant="ghost" (the default) in toolbars and headers; use other variants only to match nearby Buttons
• For a toggle such as Bold, set aria-pressed and keep the aria-label the same in both states
• Add a Tooltip with the same text when the icon is not universally understood

Avoid

• An IconButton with no aria-label, or an aria-label that describes the icon ("X", "Trash can") rather than the action
• Ambiguous icons without a Tooltip (use a Button with a text label)
• Using an IconButton for the main action of a page or form (use Button)
• Changing the aria-label of a toggle instead of using aria-pressed

Writing the content

• aria-label starts with a verb or names the action: 'Close', 'More actions', 'Delete file'
• Include the object when several IconButtons share an icon: "Delete Invoice 042"
• Use sentence case

Keyboard

• Enter and Space activate

Accessibility

• aria-label is required (no visible text)
• aria-pressed for toggle buttons

Colour tokens it reads

Related

• Button
• Tooltip

actions 75 Figma variants Try it in the live demo