Photonix

IconButton

A square button component that displays only an icon.

Preview

Usage
import { IconButton } from '@photonix/ultimate';
import { SearchOutline } from '@photonix/icons';

<IconButton icon={<SearchOutline />} variant="primary" aria-label="Search" />

Component API

IconButton

Prop
Type
Default
Description
variant
"primary" | "secondary" | "tertiary" | "brand"
'primary'
Visual variant of the button - primary: Dark solid background (main action) - secondary: Border only, transparent background - tertiary: No border, no background (subtle action) - brand: Blue brand color background
size
"small" | "large" | "medium"
'medium'
Size of the button (square) - large: 48×48px - medium: 44×44px, default - small: 36×36px
shape
"rounded" | "pill"
'rounded'
Border radius shape - rounded: Default rounded corners - pill: Fully rounded (circle)
icon
React.ReactNode
-
The icon to display
badge
string | number | boolean
-
Badge count to display at top-right corner. - Pass a number or string for a numeric/text badge. - Pass `true` for a simple dot badge.
isLoading
boolean
false
Shows loading spinner and disables interaction
aria-label
string
-
Accessible label for the button (required for icon-only buttons)
asChild
boolean
false
When true, renders children directly instead of button element

Variants

Variants

Icon buttons use the same variants as standard buttons.

Variants
<IconButton icon={<SearchOutline />} variant="primary" aria-label="Search" />
<IconButton icon={<SearchOutline />} variant="secondary" aria-label="Search" />
<IconButton icon={<SearchOutline />} variant="tertiary" aria-label="Search" />
<IconButton icon={<SearchOutline />} variant="brand" aria-label="Search" />

Sizes

Available in large (48px), medium (44px), and small (36px). Icons automatically scale.

Sizes
<IconButton icon={<SearchOutline />} size="large" aria-label="Search" />
<IconButton icon={<SearchOutline />} size="medium" aria-label="Search" />
<IconButton icon={<SearchOutline />} size="small" aria-label="Search" />

Shapes

Choose between rounded (default) or pill (circle) shapes.

Shapes
<IconButton icon={<SearchOutline />} shape="rounded" aria-label="Search" />
<IconButton icon={<SearchOutline />} shape="pill" aria-label="Search" />

Badges

Display notification counts or status dots.

Badges
<IconButton icon={<BellOutline />} badge={5} aria-label="Notifications" />
<IconButton icon={<BellOutline />} badge="99+" aria-label="Notifications" />
<IconButton icon={<BellOutline />} badge aria-label="Status" />

Loading & Disabled

Indicate progress or unavailable actions.

Loading & Disabled
<IconButton icon={<SearchOutline />} isLoading aria-label="Search" />
<IconButton icon={<SearchOutline />} disabled aria-label="Search" />

On this page

Preview
Component API
Variants
Variants
Sizes
Shapes
Badges
Loading & Disabled
Photonix UI - React Components, Templates & Figma Design System