What are they?
Components are reusable building blocks that represent specific design and functional elements, such as buttons, forms, and cards. They make sure our interfaces look and work consistently, creating a smoother and more enjoyable user experience.
Delish Components
Accordion
Vertically-stacked list that allows users to expand and collapse sections to reveal hidden content
Avatar
Visual representation of a user
Avatar group
A group of avatars displayed together
Badge
Displays notifications, statuses, or counts, providing users with contextual information
Breadcrumb
Navigation tool that shows users their location within a website or app
Button
Clickable area that signals users to perform an action by clicking or tapping on it
Card
Container for a related grouping of content and actions
Checkbox
Interactive element that allows users to make multiple selections from a list
Combobox
Allows users to select one or more options from a list or enter text in an associated input field
Dialog
Type of popup that presents information and prompts user to make a decision
Divider
Visual element used to separate and organize content
Drawer
Panel that slides in and out from the edge of the screen
Dropdown
Interactive element that allows users to make selections from a list
Field
Combination of a label and an Input area where users can enter or select data, such as text input or dropdowns
Info button
Small interactive icon to show there's additional information or context when clicked
Input
Area where users can enter in information
Label
Indicates whether a field is mandatory and provides clear instructions about what information is required from the user
Link
Clickable text that performs an action
Menu
Hidden list of options that is shown when someone interacts with a trigger component
Message bar
Element that displays notifications, alerts or status to users
Persona
Represents a person with additional contextual details
Popover
Small overlay that holds additional information related to a specific element when it is clicked
Progress bar
Visually shows how much of a task or process is completed
Progress indicator
Visual representation of the status of an ongoing process or task
Radio group
Interactive element that allows users to make a single selections from a list
Skeleton
Visual placeholder that indicates the structure of the content before the actual data is loaded
Slider
Interactive element that allows users to change a value or pick a range by moving a handle along a track
Spin button
Specialized input that lets user increase or decrease a value within a set range
Spinner
Element that communicates something is processing
Switch
Interactive control that enables users to switch between two states, such as on/off or active/inactive
Tablist
Interactive way that allows users to switch between different sections
Tag
Visual element used to represent information, categorize content, or provide a way to filter or select items
Textarea
Allows for multi-line text input
Toast
Small message that appears temporarily in the corner of the screen
Toolbar
Provides access to commonly used actions related to the user's current view or task
Tooltip
Small pop-up that shows information when you hover on a related UI element