IconButton

<IconButton>TailwindCSS Modules

Square icon-only buttons used for compact actions like closing dialogs, editing entries, or toggling state. Includes a built-in accessible tooltip to guarantee aria-compliance when visual text is omitted.

InstallationColoxo CLI

npx coloxo add icon-button --style coloxo-css

ES Module ImportPlayground / npm package

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

Design Tokens:

--cx-brand-600: #2348FF--cx-brand-deep: #072699--cx-radius-md: 8pxfocus: 2px ring + 2px offset

1. Variant Matrix

Every variant rendered in default, disabled, and destructive states at medium height (40px).

Variant	Default	Disabled	Tooltip
primary
secondary
secondary-brand
tertiary
primary-destructive
secondary-destructive
tertiary-destructive

2. Control heights (Sizes)

IconButton guarantees perfectly square aspect ratios across all 5 enterprise control heights.

Sizes

size="xs"

Dimensions: 32px (2rem)

Compact headers, inner table rows

size="sm"

Dimensions: 36px (2.25rem)

Secondary dialogs, data toolbars

size="md"DEFAULT

Dimensions: 40px (2.5rem)

Standard forms, dialog footers

size="lg"

Dimensions: 44px (2.75rem)

Marketing / checkout actions

size="xl"

Dimensions: 48px (3rem)

Hero CTAs, mobile touch targets

3. Interactive Props Configurator

Variant

Size

Disabled

Tooltip

Visual Render CanvasHEIGHT: 40PX | VARIANT: TERTIARY

tsx

1<IconButton2  aria-label="Settings"3>4  <Settings />5</IconButton>

4. Dark theme

IconButtons automatically reverse contrast variables for dark surfaces.

Tertiary

Ghost button

Secondary

Solid surface

Primary

High emphasis

Destructive

Danger zone

5. Enterprise layout compositions

Demonstrating typical dense interfaces that require icon-only actions.

Accessibility

Accessible Name Requirement

Because IconButtons lack visible text, aria-label is strictly typed as a required prop.

Tooltips

Providing the tooltip prop adds an accessible visual label on hover/focus, helping sighted users.

Focus Rings

All variants meet WCAG 2.1 AA focus indication with consistent 2px rings and offsets.

Props

Name	Type	Default	Description
aria-label	string	—	Required accessible name.
variant	"primary" \| "secondary" \| "secondary-brand" \| "tertiary" \| "primary-destructive" \| "secondary-destructive" \| "tertiary-destructive"	tertiary	Visual style.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	md	Square control size.
tooltip	string	—	Optional visible tooltip.