Getting Started
UI Library
- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Basic Usage
Variants
Branded variants
Beyond the standard shadcn variants, the Button ships branded variants used across the Project Exodus marketing surfaces. cta-secondary is designed for dark backgrounds.
With Icons
Icons can be positioned left or right via iconPosition.
Icon-Only
Always provide ariaLabel for icon-only buttons.
Loading State
The loading prop shows a spinner and disables interaction.
Button Groups
Use connected on ButtonCollection for segmented controls and aligned button sets.
Toolbar
For toolbars that mix buttons with text labels and visual separators, use ButtonGroup, ButtonGroupText, and ButtonGroupSeparator directly.
Format:
Vertical Orientation
Props
ButtonItem
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | ReactNode | Required | Button label or content |
icon | ReactNode | - | Icon element |
description | string | - | Description text (with container) |
title | string | - | Title text (with container) |
id | string | number | - | Unique identifier |
href | string | - | URL for link buttons |
onClick | () => void | - | Click handler |
disabled | boolean | false | Disable the button |
loading | boolean | false | Show loading spinner |
type | "button" | "submit" | "reset" | "button" | Button type attribute |
buttonVariant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual variant |
buttonSize | "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | "default" | Size variant |
showContainer | boolean | false | Wrap in a container |
containerVariant | "card" | "outline" | "ghost" | "minimal" | "card" | Container style |
iconPosition | "left" | "right" | "left" | Icon placement |
target | "_blank" | "_self" | "_parent" | "_top" | - | Link target |
ariaLabel | string | - | Accessibility label for icon buttons |
className | string | - | Additional CSS classes |
ButtonCollection
| Prop | Type | Default | Description |
|---|---|---|---|
items | ButtonItemProps[] | Required | Array of button items |
layout | "stack" | "grid" | "inline" | "stack" | Collection layout |
columns | 1 | 2 | 3 | 4 | 1 | Grid columns (grid layout only) |
gap | "sm" | "md" | "lg" | "md" | Spacing between items |
justify | "start" | "center" | "end" | "between" | "start" | Horizontal alignment |
connected | boolean | false | Connect buttons visually |
buttonVariant | string | "default" | Shared variant (cascades to items) |
buttonSize | string | "default" | Shared size (cascades to items) |
onItemClick | (item, index) => void | - | Collection-level click handler |
className | string | - | Additional CSS classes |
ButtonGroup
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction |
className | string | - | Additional CSS classes |
ButtonGroupSeparator
Renders a visual divider between items. Extends Separator.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "vertical" | Separator direction |
className | string | - | Additional CSS classes |
ButtonGroupText
A styled text/label element rendered inside a group.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render as child element via Radix Slot |
className | string | - | Additional CSS classes |