Photonix

Button

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

Preview

Usage
"use client";

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

export default function ButtonPreviewExample() {
    return <Button variant="primary">Continue</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

Button Variants

Primary, secondary, tertiary, and brand button variants rendered from the same source used by this snippet.

Button Variants
"use client";

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

export default function ButtonVariantsExample() {
    return (
        <Flex gap="sm" wrap>
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="tertiary">Tertiary</Button>
            <Button variant="brand">Brand</Button>
        </Flex>
    );
}

Sizes

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

Sizes
"use client";

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

export default function ButtonSizesExample() {
    return (
        <Flex gap="md" align="center" justify="center" wrap="wrap">
            <Button size="small">Small</Button>
            <Button size="medium">Medium</Button>
            <Button size="large">Large</Button>
        </Flex>
    );
}

Shapes

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

Shapes
"use client";

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

export default function ButtonShapesExample() {
    return (
        <Flex gap="md" align="center" justify="center" wrap="wrap">
            <Button shape="rounded">Rounded</Button>
            <Button shape="pill">Pill</Button>
        </Flex>
    );
}

Full Width

Buttons can span the full width of their container.

Full Width
"use client";

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

export default function ButtonFullWidthExample() {
    return (
        <Box w="100%" maxW={400}>
            <Button isFullWidth>Full Width Button</Button>
        </Box>
    );
}

Icons & Badges

Add leading/trailing icons or notification badges.

Icons & Badges
"use client";

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

export default function ButtonIconsExample() {
    return (
        <Flex gap="md" wrap="wrap" justify="center">
            <Button leadingIcon={<AddOutline />}>Create</Button>
            <Button trailingIcon={<ArrowRightOutline />}>Next</Button>
            <Button variant="secondary" badge={5}>Messages</Button>
        </Flex>
    );
}

Loading & Disabled

Communicate state to the user.

Loading & Disabled
"use client";

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

export default function ButtonStatesExample() {
    return (
        <Flex gap="md" wrap="wrap" justify="center">
            <Button isLoading>Loading</Button>
            <Button disabled>Disabled</Button>
        </Flex>
    );
}

On this page

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