Overview
- Getting Started
- Loading States
- Forms
- Feature Flags
- Portal
- Show
- For
- Text
- Toggle
- Local Storage
Actions
- Button
- Icon Button
Communication
- Admonition
- Accordion
- Avatar
- Notifications
- Progress Indicators
- Tag
- Tooltip
Containment
- Confirm Modal
- Prompt Modal
- CTA Modal
- Modaldeprecated
- Dialog
- Table
Navigation
- Menu
- Tabs
Selection
- Drag & Drop
- Checkbox
- Date Picker
- Radio
- Rating
- Select
- Combobox
- Switch
Inputs
- Field
- Input
- Textarea
- Labeldeprecated
- Fieldset
- Field Messagedeprecated
- File Uploader
Hooks & Helpers
- split-props
- trap-focusdeprecated
- use-root-colors
- use-theme
- use-theme-context
- use-toggledeprecated
Notifications
Notifications show short updates about app processes at the on the screen.
- Notifications shouldn’t interrupt the user’s experience
- Usually appear at the bottom of the UI on mobile
- Usually appear at the top of the UI on desktop
- Can disappear on their own or remain on screen until the user takes action
- Can combine with badges to show the number of notifications
- Should use short and clear single sentences
Toasts
Toasts are notifications that appear temporarily at the top of the screen. They can be used to show short updates about app processes.
Badges
Badges can be used to show the number of notifications on any trigger.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Notifications shouldn’t interrupt the user’s experience
- Usually appear at the bottom of the UI on mobile
- Usually appear at the top of the UI on desktop
- Can disappear on their own or remain on screen until the user takes action
- Can combine with badges to show the number of notifications
- Should use short and clear single sentences
Toasts
Toasts are notifications that appear temporarily at the top of the screen. They can be used to show short updates about app processes.
Badges
Badges can be used to show the number of notifications on any trigger.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Notifications shouldn’t interrupt the user’s experience
- Usually appear at the bottom of the UI on mobile
- Usually appear at the top of the UI on desktop
- Can disappear on their own or remain on screen until the user takes action
- Can combine with badges to show the number of notifications
- Should use short and clear single sentences
Toasts
Toasts are notifications that appear temporarily at the top of the screen. They can be used to show short updates about app processes.
Badges
Badges can be used to show the number of notifications on any trigger.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |
- Notifications shouldn’t interrupt the user’s experience
- Usually appear at the bottom of the UI on mobile
- Usually appear at the top of the UI on desktop
- Can disappear on their own or remain on screen until the user takes action
- Can combine with badges to show the number of notifications
- Should use short and clear single sentences
Toasts
Toasts are notifications that appear temporarily at the top of the screen. They can be used to show short updates about app processes.
Badges
Badges can be used to show the number of notifications on any trigger.
Resources
| Name | Resource | Status |
|---|---|---|
| Figma | Design Kit (Figma) | Private |