Photonix UI - React Components, Templates & Figma Design System

Button

Displays a button or a component that looks like a button.

Preview

Usage

import { Button } from '@photonix/ultimate';

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

Component API

Button

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 - large: 48px height - medium: 44px height, default - small: 36px height, compact
leadingIcon	`React.ReactNode`	`-`	Icon displayed before the button text
trailingIcon	`React.ReactNode`	`-`	Icon displayed after the button text
badge	`string \| number`	`-`	Badge count to display after the text (for filters, selects, etc.) Displays as a small text badge next to the button label
isLoading	`boolean`	`false`	Shows loading spinner and disables interaction
isFullWidth	`boolean`	`false`	Makes button take full width of container
asChild	`boolean`	`false`	When true, renders children directly instead of button element Useful for rendering as Link or other components
shape	`"rounded" \| "pill"`	`'rounded'`	Border radius shape - rounded: Default rounded corners - pill: Fully rounded (pill shape)

Variants

Buttons come in four main variants: primary, secondary, tertiary, and brand.

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="brand">Brand</Button>

Sizes

Available in small, medium (default), and large sizes.

Sizes

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

Shapes

Buttons can be rounded (default) or pill-shaped.

Shapes

<Button shape="rounded">Rounded</Button>
<Button shape="pill">Pill</Button>

Full Width

Buttons can span the full width of their container.

Full Width

<Button isFullWidth>Full Width Button</Button>

Icons & Badges

Add leading/trailing icons or notification badges.

Icons & Badges

import { AddOutline, ArrowRightOutline } from '@photonix/icons';

<Button leadingIcon={<AddOutline />}>Create</Button>
<Button trailingIcon={<ArrowRightOutline />}>Next</Button>
<Button variant="secondary" badge={5}>Messages</Button>

Loading & Disabled

Communicate state to the user.

Loading & Disabled

<Button isLoading>Loading</Button>
<Button disabled>Disabled</Button>

Button

Preview

Component API

Button

Variants

Variants

Sizes

Shapes

Full Width

Icons & Badges

Loading & Disabled

On this page