IconButton

In the app

Button with variant ghost and an icon size, plus a required label. Row-level overflow actions, close buttons, collapse toggles.

@varick/ui/components/icon-buttonAdded 26 Aug 2026

Submission router

Renewal manager

Usage

import { IconButton } from "@varick/ui/components/icon-button";

export function Example() {
  return (
    <IconButton label="Row actions">
      <DotsIcon />
    </IconButton>
  );
}

Variants

Sizes and variants

<IconButton label="More" />
<IconButton label="More" size="icon" />
<IconButton label="Close" size="icon" variant="outline"><CloseIcon /></IconButton>
<IconButton label="Add" size="icon" variant="primary"><PlusIcon /></IconButton>

API reference

Every component also accepts className and the native props of its root element.

Prop	Type	Default	Description
label	string	required	The aria-label.
children	ReactNode	dots icon	A 14px icon. Defaults to the overflow dots.
size	'icon' \| 'icon-sm'	'icon-sm'	30px in toolbars, 24px inside rows.
variant	Button variant	'ghost'	Borderless until hover.

Styles

The CSS as it appears in the app. The live component above is the same values as Tailwind classes.

.sec-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--fg-mid);
  transition: background 120ms ease, transform 160ms var(--ease-out);
}
.sec-btn:hover { background: var(--fill); color: var(--fg-high); }

.dropdown-trigger { width: 30px; height: 30px; border-radius: 4px; }
.dropdown-trigger:hover,
.dropdown-trigger[aria-expanded="true"] { background: var(--fill); color: var(--fg-high); }