Compact Button

Compact buttons are space-efficient controls used for inline actions, toolbars, compact cards, and table rows. They support text labels, leading icons, trailing icons, and icon-only modes.

Compact Button Playground

Preview

Code

Controls

Variant:

Filled

Outline

Subtle

Size:

Default

Small

Text Label:

Leading Icon:

Trailing Icon:

Disabled:

Installation

You can add the compact 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.

CompactButton.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 compact button with text label:

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

// Text with leading icon
<CompactButton leadingIcon={<PlusIcon />}>
  Add Item
</CompactButton>

// Icon-only mode
<CompactButton icon={<PlusIcon />} aria-label="Add Item" />

Variants

Three visual style variants are available — filled, outline, and subtle:

import { CompactButton } from '@versaui/ui/components/Button';
import { PlusIcon, GearIcon, TrashIcon } from '@phosphor-icons/react';

// Filled (default)
<CompactButton variant="filled" leadingIcon={<PlusIcon />}>
  Create
</CompactButton>

// Outline
<CompactButton variant="outline" leadingIcon={<GearIcon />}>
  Configure
</CompactButton>

// Subtle
<CompactButton variant="subtle" leadingIcon={<TrashIcon />}>
  Delete
</CompactButton>

Icon & Text Combinations

Compact buttons can display leading icons, trailing icons, both, or icon-only:

import { CompactButton } from '@versaui/ui/components/Button';
import { PlusIcon, ArrowRightIcon } from '@phosphor-icons/react';

// Leading icon + text
<CompactButton leadingIcon={<PlusIcon />}>Add User</CompactButton>

// Trailing icon + text
<CompactButton trailingIcon={<ArrowRightIcon />}>Next</CompactButton>

// Leading + Trailing icons
<CompactButton leadingIcon={<PlusIcon />} trailingIcon={<ArrowRightIcon />}>Process</CompactButton>

// Icon-only
<CompactButton icon={<PlusIcon />} aria-label="Add User" />

Sizes

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

import { CompactButton } from '@versaui/ui/components/Button';

<CompactButton size="default" leadingIcon={<PlusIcon />}>Default Size</CompactButton>
<CompactButton size="small" leadingIcon={<PlusIcon />}>Small Size</CompactButton>

Disabled State

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

<CompactButton disabled leadingIcon={<GearIcon />}>
  Settings
</CompactButton>

Accessibility

Icon-only variants require an aria-label for screen reader identification
Full keyboard navigation with focus ring styling
Disabled state prevents interaction and applies ARIA attributes
Built on @react-aria/button for accessible button primitives

CompactButton Props

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Text label or content inside the button.
`variant`	`'filled' \| 'outline' \| 'subtle'`	`'filled'`	Visual style variant.
`size`	`'default' \| 'small'`	`'default'`	Button size (32px vs 24px height).
`leadingIcon`	`ReactNode`	`—`	Icon displayed before text label.
`trailingIcon`	`ReactNode`	`—`	Icon displayed after text label.
`icon`	`ReactNode`	`—`	Icon element for icon-only variant.
`iconOnly`	`boolean`	`auto`	Explicitly control icon-only mode.
`disabled`	`boolean`	`false`	Prevents interaction.
`onClick`	`() => void`	`—`	Click handler function.
`aria-label`	`string`	`—`	Accessible label for screen readers.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page