Photonix

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
string
'primary'
Visual variant: 'primary', 'secondary', 'tertiary', 'brand'.
size
string
'medium'
Size of the button: 'large', 'medium', 'small'.
shape
string
'rounded'
Border radius shape: 'rounded' (default) or 'pill'.
leadingIcon
ReactNode
-
Icon displayed before the button text.
trailingIcon
ReactNode
-
Icon displayed after the button text.
badge
number | string
-
Badge value (number or string) to display next to the label.
isLoading
boolean
false
Shows loading spinner and disables interaction.
isFullWidth
boolean
false
Makes the button take the full width of its container.
asChild
boolean
false
Render as a different element (e.g., for links) via Radix Slot.
disabled
boolean
false
Standard HTML disabled attribute.

Variants

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>

On this page

Preview
Component API
Variants
Variants
Sizes
Shapes
Full Width
Icons & Badges
Loading & Disabled