Photonix UI - React Components, Templates & Figma Design System

IconButton

A square button component that displays only an icon.

Preview

Usage

"use client";

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

export default function IconButtonPreviewExample() {
    return <IconButton variant="primary" icon={<SearchOutline />} 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

Icon Button Variants

Icon-only buttons keep variant, size, shape, icon, badge, and aria-label in the canonical snippet.

Icon Button Variants

"use client";

import { Flex, IconButton } from '@photonix/ultimate';
import { AddOutline, SearchOutline, SettingsOutline, TrashOutline } from '@photonix/icons';

export default function IconButtonVariantsExample() {
    return (
        <Flex gap="sm" wrap align="center">
            <IconButton variant="primary" icon={<AddOutline />} aria-label="Add item" />
            <IconButton variant="secondary" icon={<SearchOutline />} aria-label="Search" />
            <IconButton variant="tertiary" icon={<SettingsOutline />} aria-label="Settings" />
            <IconButton variant="brand" shape="pill" badge="2" icon={<TrashOutline />} aria-label="Delete" />
        </Flex>
    );
}

Sizes

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

Sizes

"use client";

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

export default function IconButtonSizesExample() {
    return (
        <Flex gap="md" align="center" justify="center" wrap="wrap">
            <IconButton icon={<SearchOutline />} size="large" aria-label="Search" />
            <IconButton icon={<SearchOutline />} size="medium" aria-label="Search" />
            <IconButton icon={<SearchOutline />} size="small" aria-label="Search" />
        </Flex>
    );
}

Shapes

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

Shapes

"use client";

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

export default function IconButtonShapesExample() {
    return (
        <Flex gap="md" align="center" justify="center" wrap="wrap">
            <IconButton icon={<SearchOutline />} shape="rounded" aria-label="Search" />
            <IconButton icon={<SearchOutline />} shape="pill" aria-label="Search" />
        </Flex>
    );
}

Badges

Display notification counts or status dots.

Badges

"use client";

import { Flex, IconButton } from '@photonix/ultimate';
import { BellOutline } from '@photonix/icons';

export default function IconButtonBadgesExample() {
    return (
        <Flex gap="md" wrap="wrap" justify="center">
            <IconButton icon={<BellOutline />} badge={5} aria-label="Notifications" />
            <IconButton icon={<BellOutline />} badge="99+" aria-label="Notifications" />
            <IconButton icon={<BellOutline />} badge aria-label="Status" />
        </Flex>
    );
}

Loading & Disabled

Indicate progress or unavailable actions.

Loading & Disabled

"use client";

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

export default function IconButtonStatesExample() {
    return (
        <Flex gap="md" wrap="wrap" justify="center">
            <IconButton icon={<SearchOutline />} isLoading aria-label="Search" />
            <IconButton icon={<SearchOutline />} disabled aria-label="Search" />
        </Flex>
    );
}

IconButton

Preview

Component API

IconButton

Variants

Icon Button Variants

Sizes

Shapes

Badges

Loading & Disabled

On this page