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. Its label tells users 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 shows the dates in a month. It can be interactive, so users can select dates.CheckboxA checkbox lets users select one or more options from a set of choices.CommentA comment shows discussion and feedback from users.Date time pickerA date time picker lets users select a date and a time.Dropdown menuA dropdown menu shows a list of actions or options.Focus ringA focus ring shows which item has keyboard focus.FormA form lets people enter information.RadioA radio lets users select only one option from a set of choices.RangeA range lets users choose an approximate value on a slider.SelectA select lets users choose one or more options from a list.Text areaA text area lets users enter longer text over several lines.Text fieldA text field lets users enter or edit text.ToggleA toggle shows whether a setting is on or off, and switches between the two.
Images and icons
7 components
AvatarAn avatar is a visual representation of a user or entity.Avatar groupAn avatar group shows several avatars together in a stack or grid.IconAn icon is a symbol representing a command, device, directory, or common action.ImageAn image 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 holds an asset to represent something.
Labels
4 components
Layout and structure
4 components
Loading
3 components
Messaging
7 components
BannerA banner shows an important message at the top of the screen.Empty stateAn empty state appears when there is no data to show. It tells users what they can do next.FlagA flag shows confirmations, alerts and acknowledgements that need little interaction.Inline messageAn inline message tells users when important information is available or when they need to act.Modal dialogA modal dialog shows content that needs a response, in a layer that covers the page.Section messageA section message alerts users to one section of the screen.SpotlightA spotlight draws attention to one part of the interface to teach users about a key feature or workflow.
Navigation
6 components
BreadcrumbsBreadcrumbs show where the user is in a site or app.LinkA link takes people to a new location in the app or another website.MenuA menu is a list of options for moving around or taking actions.Navigation systemThe main navigation for an app.PaginationPagination splits a large amount of content across several pages.TabsTabs group related content into sections on the same page.
Overlays and layering
5 components
BlanketA blanket covers the interface behind 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 small popup that holds a little information.PopupA popup displays brief content in an overlay.TooltipA tooltip is a floating label that explains an element or feature. It has no actions.
Status indicators
3 components
Text and data display
7 components
CodeCode shows short pieces of code inline with body text.Dynamic tableA dynamic table shows rows of data, with pagination, sorting and reordering included.HeadingA heading shows text at different sizes and styles.Inline editAn inline edit shows a value that switches between reading and editing on the same page.TableA table shows data.Table treeA table tree is a table that expands to show nested levels of information.Visually hiddenHides content from the screen but keeps it available to screen readers.