novixuiv0.1
Install

Components · v0.1 · Stable

IconButton

A single-tap square action for toolbars, table rows, and headers. The type signature refuses to compile without an aria-label — icon buttons can never ship without a name.

Example

A ghost icon action — the most common footprint in toolbars.

Installation

Install and import.

tsx
npx @novix-ui/cli add icon-button
tsx
import { IconButton } from "@novix-ui/react";

When to use

Reach for it when

  • Space is tight and the meaning is universal (search, close, settings)
  • You need a dense toolbar of parallel actions
  • The action is repeated per row in a table

Reach for something else

  • The action needs a label to be understood — use Button
  • The icon is decorative — put it inside a Button with a text label
  • The control toggles state — use a Switch or ToggleButton (soon)

Playground

Playground

ghost
md

Variants

Sizes

API

Prop
Type
Default
Description
  • aria-label
    string
    —
    Required — the accessible name. Enforced at the type level.
  • variant
    "primary" | "accent" | "secondary" | "ghost" | "outline" | "destructive"
    "ghost"
    Visual intent.
  • size
    "xs" | "sm" | "md" | "lg" | "xl"
    "md"
    Square footprint sized to the icon.
  • asChild
    boolean
    false
    Render onto a child (link, menu trigger, etc.).
  • loading
    boolean
    false
    Swap the icon for a spinner and set aria-busy.

Keyboard

  • Tab — focus the button
  • Enter / Space — activate

Accessibility

  • Rendered as a native <button> unless asChild.
  • Loading applies aria-busy.
  • Focus ring is two-layer for contrast on any surface.

Design guidelines

Universal icons only

Icon-only means the icon must communicate on its own. Custom icons need a text label.

Consistent size per surface

Pick one IconButton size for the toolbar and stick to it. Mixing feels sloppy.

Group related actions

Use a Separator between semantic clusters (edit tools vs. destructive tools).

Tooltip for the label

Add a Tooltip (soon) that mirrors aria-label. Never a different string.

Common mistakes

  • Passing text as children — IconButton is icon-only. Use Button when a label is needed.
  • Sizing icons manually. The component sizes SVG children automatically per size.