Buttons
All button variants and sizes.
Variants
Sizes
Text + icon (size variants)
All variants with icon
Loading with icon
Loading (toggle)
Disabled
Links
TextLink (inline), SmartLink (polymorphic), and Button with href.
TextLink — inline in paragraphs
This is a paragraph with an inline link in the middle.
Default
Muted
Destructive
SmartLink — Link, Pressable, or View
Link
Link + onPress
View (no props)
Button with href
Link
Link + onPress
Badges
All badge variants.
Variants
Default
Secondary
Destructive
Outline
Clickable
As Link
As Button
As SmartLink
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Key features include advanced processing capabilities, and an intuitive user interface designed for both beginners and experts.
Alerts
Alert variants with icon, title, and description.
Toasts
All toast variants and sizes.
Pattern 1: variant prop
Semantic usage with ARIA roles. Best for headings and structured content.
Headings (with ARIA roles)

H1 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ

H2 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ

H3 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ

H4 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ

H5 Heading - ABCDEFGHIJKLMNOPQRSTUVWXYZ
Titles
Title Large
Title
Title Small
Paragraphs
Paragraph Large
Paragraph Large 600
Paragraph
Paragraph 600
Paragraph Link
Paragraph Small
Paragraph Small 600
Paragraph XS
Paragraph XS 600
Labels
Label Large
Label Large 600
Label
Label 600
Label Small
Label Small 600
Label XS
Links
Link Text
Pattern 2: className
Utility usage for overrides and combining with other classes.
Headings (className with presets)
H1 Size (64px)
H2 Size (48px)
H3 Size (36px)
H4 Size (32px)
H5 Size (24px)
With color overrides
Title with primary color
Paragraph with muted color
Label with destructive color
Responsive text classes