Typography
Headings
Heading h1
Heading h2
Heading h3
Heading h4
Texts
This comes with presets for regular text styles. We have standard paragraphs, strong text , and emphasized text . You can also use code blocks for monospaced highlighting.
text component, which renders as a span element. You can also use the kbd component to highlight keys like Space , and of course, there is a link component available.
This can be a great starting point for your next toddle project.
Components
Accordion
Alert Dialog
Avatar
Sizes
Variants
Avatar Group
Badge
Sizes
Small Medium Large
Colors
Brand Neutral Success Warning Critical
Bottom Sheet
Callout
Colors
Neutral callout
Brand callout
Success callout
Warning callout
Critical callout
Checkbox
Default
Indeterminate
Checkbox Group
Checkbox Cards
Collapsible
Data List
- Status
- Authorized
- ID
- u_2J89JSA4GJ
- Name
- Jane Doe
- jane.doe@example.com
- Company
- Spark
Dialog
Dropdown
Field
Variants
Login Example
Popover
Radio Cards
Radio Group
Select
Single
Multi
Separator
Skeleton
Spinner
Sizes
Colors
Switch
Switch Cards
Table
| Full name | Group | |
|---|---|---|
| Jane Doe | jane@example.com | Developer |
| John Doe | joe@example.com | Admin |
| Jasper Eriksson | jasper@example.com | Developer |