ComponentsFormButton

Button

Triggers an action or event. Supports 6 variants, 5 sizes, loading states, icon support and full keyboard accessibility.

6 variants5 sizesLoading stateIcon supportWAI-ARIA

Variants

Live preview

6 variants covering the full emphasis spectrum

App.tsx

tsx

1import { Button } from 'omverse-ui'
2 
3<Button variant="filled">Filled</Button>
4<Button variant="outlined">Outlined</Button>
5<Button variant="tonal">Tonal</Button>
6<Button variant="text">Text</Button>
7<Button variant="elevated">Elevated</Button>
8<Button variant="filled" gradient>Gradient</Button>

Sizes

Live preview

5 sizes from xs to xl

App.tsx

tsx

1<Button size="xs">Extra small</Button>
2<Button size="sm">Small</Button>
3<Button size="md">Medium</Button>
4<Button size="lg">Large</Button>
5<Button size="xl">Extra large</Button>

All sizes

Live preview

xs → xl across filled, outlined and tonal variants

App.tsx

tsx

1{/* filled */}
2<Button variant="filled" size="xs">xs</Button>
3<Button variant="filled" size="sm">sm</Button>
4<Button variant="filled" size="md">md</Button>
5<Button variant="filled" size="lg">lg</Button>
6<Button variant="filled" size="xl">xl</Button>
7 
8{/* outlined */}
9<Button variant="outlined" size="xs">xs</Button>
10<Button variant="outlined" size="sm">sm</Button>
11<Button variant="outlined" size="md">md</Button>
12<Button variant="outlined" size="lg">lg</Button>
13<Button variant="outlined" size="xl">xl</Button>
14 
15{/* tonal */}
16<Button variant="tonal" size="xs">xs</Button>
17<Button variant="tonal" size="sm">sm</Button>
18<Button variant="tonal" size="md">md</Button>
19<Button variant="tonal" size="lg">lg</Button>
20<Button variant="tonal" size="xl">xl</Button>

States

Live preview

Loading and disabled states

App.tsx

tsx

1<Button variant="filled" loading>Loading</Button>
2<Button variant="filled" disabled>Disabled</Button>
3<Button variant="outlined" disabled>Disabled</Button>

Success state

Live preview

Swaps the leading icon to a checkmark to confirm a completed action

App.tsx

tsx

1<Button variant="filled" success>Saved!</Button>
2<Button variant="tonal" success>Done!</Button>

Icon combinations

Live preview

Leading and trailing icon support across variants

App.tsx

tsx

1<Button variant="filled" leadingIcon="plus">Add item</Button>
2<Button variant="filled" trailingIcon="arrow-right">Continue</Button>
3<Button variant="outlined" leadingIcon="download">Download</Button>
4<Button variant="tonal" leadingIcon="share">Share</Button>
5<Button variant="filled" gradient leadingIcon="star">Featured</Button>

Full width

Live preview

Stretches to fill the container — icons are pushed to the edges when both are present

App.tsx

tsx

1<Button variant="filled" fullWidth>Full width filled</Button>
2<Button variant="outlined" fullWidth>Full width outlined</Button>

Props

PropTypeDefaultDescription

size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'Controls height, padding and font size

loadingbooleanfalseShows a spinner and disables interaction

successbooleanfalseSwaps leading icon to checkmark to confirm a completed action

disabledbooleanfalseDisables the button and reduces opacity

leadingIconIconNameundefinedIcon shown before the label

trailingIconIconNameundefinedIcon shown after the label

fullWidthbooleanfalseStretches the button to its container full width

gradientbooleanfalseBlue→purple gradient — only applies on filled and destructive variants