Compact Icon Button

Compact icon buttons are used for actions that can be represented by a single icon in a small space, such as toolbars and inline controls.

Compact Icon Button Playground

Preview

Code

Controls

Variant:

Filled

Outline

Subtle

Size:

Default

Small

Disabled:

Installation

You can add the compact icon button component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install @react-aria/button @react-aria/focus @react-aria/interactions

Copy and paste the following code into your project.

CompactIconButton.tsx

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

A simple icon button with the default filled variant:

import { CompactIconButton } from '@versaui/ui/components/Button';
import { GearIcon } from '@phosphor-icons/react';

<CompactIconButton icon={<GearIcon />} aria-label="Settings" />

Variants

Three visual styles are available:

import { PlusIcon, GearIcon, TrashIcon } from '@phosphor-icons/react';

// Filled (default) — solid background
<CompactIconButton variant="filled" icon={<PlusIcon />} aria-label="Add" />

// Outline — border only
<CompactIconButton variant="outline" icon={<GearIcon />} aria-label="Settings" />

// Subtle — transparent background
<CompactIconButton variant="subtle" icon={<TrashIcon />} aria-label="Delete" />

Size Variants

Two sizes available — default (32px) and small (24px):

<CompactIconButton size="default" icon={<PlusIcon />} aria-label="Add" />
<CompactIconButton size="small" icon={<PlusIcon />} aria-label="Add" />

Disabled State

<CompactIconButton disabled icon={<GearIcon />} aria-label="Settings" />

Accessibility

Requires aria-label for screen reader identification
Full keyboard navigation with focus ring
Proper ARIA attributes for disabled state
Uses @react-aria/button for accessible button behavior