Components
Components are reusable building blocks that meet specific interaction needs. They combine to create intuitive user experiences.
Forms and inputs
19 components
ButtonA button triggers an event or action. They let users know what will happen next.Button groupA button group shows related actions together.Icon buttonAn icon button shows an icon instead of a label.Link buttonA link button navigates, but is drawn as a button.Link icon buttonA link icon button navigates and shows an icon instead of a label.Split buttonA split button pairs a primary action with a menu of related actions.CalendarA calendar showing dates across the span of a month. They can be interactive and selectable.CheckboxA checkbox is an input control that allows a user to select one or more options from a number of choices.CommentA comment displays discussions and user feedback.Date time pickerA date time picker allows the user to select an associated date and time.Dropdown menuA dropdown menu displays a list of actions or options to a user.Focus ringA focus ring clearly indicates which item has keyboard focus.FormA form allows people to input information.RadioA radio input allows users to select only one option from a number of choices.RangeA range lets users choose an approximate value on a slider.SelectSelect allows users to make a single selection or multiple selections from a list of options.Text areaA text area lets users enter long form text which spans over multiple lines.Text fieldA text field is an input that allows a user to write or edit text.ToggleA toggle is used to view or switch between enabled or disabled states.
Images and icons
7 components
AvatarAn avatar is a visual representation of a user or entity.Avatar groupAn avatar group displays a number of avatars grouped together in a stack or grid.IconAn icon is a symbol representing a command, device, directory, or common action.ImageAn image component that can switch between light and dark themes.LogoA logo is a visual representation of a brand or app.ObjectAn object is an icon that represents a content type.TileA tile is a rounded square that takes an asset and represents a noun.
Labels
4 components
BadgeA badge is a visual indicator for numeric values such as tallies and scores.Date labelDate label is a non-interactive label that displays a date and optionally, visually communicates its status.LozengeA lozenge is a visual indicator used to highlight an item's status for quick recognition.TagA tag labels UI objects for quick recognition and navigation.
Layout and structure
4 components
Loading
3 components
Messaging
7 components
BannerA banner displays a prominent message at the top of the screen.Empty stateAn empty state appears when there is no data to display and describes what the user can do next.FlagA flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction.Inline messageAn inline message lets users know when important information is available or when an action is required.Modal dialogA modal dialog displays content that requires user interaction in a layer that covers the page.Section messageA section message is used to alert users to a particular section of the screen.SpotlightA spotlight focuses attention on a specific part of the UI to educate users about key features or workflows.
Navigation
6 components
BreadcrumbsBreadcrumbs are a navigation system used to show a user's location in a site or app.LinkA link takes people to a new location in the app or another website.MenuA list of options to help users navigate or perform actions.Navigation systemThe navigation system for apps.PaginationPagination allows you to divide large amounts of content into smaller chunks across multiple pages.TabsTabs are used to organize content by grouping similar information on the same page.
Overlays and layering
5 components
BlanketA blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.DrawerA drawer is a panel that slides in from the side of the screen.Inline dialogAn inline dialog is a pop-up container for small amounts of information.PopupA popup displays brief content in an overlay.TooltipA tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Status indicators
3 components
Text and data display
7 components
CodeCode highlights short strings of code snippets inline with body text.Dynamic tableA dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.HeadingA heading is a typography component used to display text in different sizes and formats.Inline editAn inline edit displays a custom input component that switches between reading and editing on the same page.TableA table is used to display data.Table treeA table tree is an expandable table for showing nested hierarchies of information.Visually hiddenA utility that hides content from the screen while retaining readability by screen readers.