Components

IconButton

An action button that shows only an icon and has a required accessible name.

Storybook: Storybook
Source: Source

Installation

Package: @bigbang/ui
Import: import { IconButton } from '@bigbang/ui';
Source: IconButton.tsx
Storybook: IconButton · Playground

IconButton is in the @bigbang/ui package. Icons are picked by name from the @bigbang/icons registry.

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

<IconButton icon="x" label="Close" onClick={close} />;
<IconButton variant="secondary" tone="danger" icon="trash" label="Delete" />;

Props

iconRequired

Description: Registered icon name. The icon is decorative; label names the button.
Type: IconName

labelRequired

Description: The accessible name, read by screen readers and used as the tooltip text. Required: an icon alone does not say what the button does. Write a verb phrase ("Kapat", "Close").
Type: string

variant

Description: How important the action is. tertiary has no fill or border and suits toolbars and table rows. glass suits controls over a photo or video; inside a dark data-backdrop it takes the clearer glass.
Type: 'glass' | 'primary' | 'secondary' | 'tertiary' | 'glass-prominent'
Default: 'tertiary'

tone

Description: danger marks an action that deletes or cannot be undone.
Type: 'neutral' | 'danger'
Default: 'neutral'

size

Description: Square box of 24, 32, 36 or 40 px, matching the Button heights. xs is for in-cell actions in dense tables.
Type: 'xs' | 'sm' | 'md' | 'lg'
Default: 'md'

shape

Description: circle is fully round, for floating or avatar-like actions.
Type: 'square' | 'circle'
Default: 'square'

loading

Description: Shows a spinner over the icon and ignores clicks while the action runs; the button stays focusable.
Type: boolean
Default: false

loadingLabel

Description: Text announced once when loading starts. Defaults to ui.button.loading ("Yükleniyor" or "Loading").
Type: string

disabled

Description: Turns off interaction and removes the button from the tab order.
Type: boolean
Default: false

focusableWhenDisabled

Description: Keeps the button focusable while disabled, with aria-disabled. Use it when nearby text explains why.
Type: boolean
Default: false

tooltipSide

Description: Side of the button where the tooltip appears.
Type: 'top' | 'bottom' | 'inline-start' | 'inline-end'
Default: 'top'

className

Description: For layout only: margins and placement.
Type: string

Other Base UI Button attributes such as onClick, type, name and form pass through to the button.

Data attributes

data-component="icon-button": on the root <button>.
data-loading and data-disabled: in the matching state, from Button.