UI Components Demo
Button Variants
All available color variants with different presets (filled, outline, tonal, ghost, glass, elevated, gradient)
primary
secondary
tertiary
success
warning
error
surface
Button Sizes
Available sizes: small, medium (default), and large
Text Only
With Icon (Left)
With Icon (Right)
Icon Only
Icon Only (Ghost)
Button States
Interactive, disabled, and loading states
Button Types
Different button types for forms
Usage Example
<Button color='primary' preset='filled'>Button Text</Button>
<Button color='success' variant='outline' size='lg'>Large Button</Button>
<Button color='error' disabled=true>Disabled</Button>
<Button color='primary' loading=false>Loading Button</Button>
Badge Variants
All available color variants with different presets (filled, tonal, outline)
primary
filledtonaloutlined
secondary
filledtonaloutlined
tertiary
filledtonaloutlined
success
filledtonaloutlined
warning
filledtonaloutlined
error
filledtonaloutlined
surface
filledtonaloutlined
Badge Sizes
Available sizes: small, medium (default), and large
Small Badge Medium Badge Large Badge
Badge with Icon
Badges can contain icons along with text
Liked Favorite
Usage Example
<Badge color='primary' variant='filled'>Badge Text</Badge>
<Badge color='success' variant='tonal'>Badge Text</Badge>
<Badge color='error' variant='outlined'>Badge Text</Badge>
<Badge color='primary' size='sm'>Small Badge</Badge>
<Badge color='primary' size='md'>Medium Badge</Badge>
<Badge color='primary' size='lg'>Large Badge</Badge>
<Badge color='primary' variant='filled'>
<Heart size=16 />
Liked
</Badge>Button Variants
All available color variants with different presets (filled, outline, tonal, ghost, glass, elevated, gradient)
primary
secondary
tertiary
success
warning
error
surface
Usage Example
<Button color='primary' icon=true></Button>