Components
Components are the building blocks of the design system.
A component describes a common pattern that can be composed together with other components and content to create larger things like pages or applications. In order to facilitate composition, components seek to do one thing well and be as simple as possible while still providing options for customization.
A badge brings attention to information about a related component.
A button allows the user to perform an action.
A callout brings attention to important information that is related to the main content.
A checkbox allows the user to check or uncheck an option.
A choice field allows the user to choose one or more option from a set of related options.
A disclosure allows the user to show and hide additional content.
A dropdown allows the user to select an option from a list of options in an expandable overlay.
A link allows the user to navigate to another place.
A modal presents important information or simple tasks to the user in an overlay.
A popover allows the user to reveal more information or non-critical tasks in an overlay.
A progress bar lets the user know that something is processing or progressing.
A radio group allows the user to select one option from a set of related options.
A response indicator lets the user know if their answer selection is correct or incorrect.
A spinner lets the user know that something is processing or progressing.
A step indicator allows users to know where they are in a long process or form while they focus on completing discrete steps.
A switch allows the user to immediately turn an option on or off.
A table allows users to view data organized in rows and columns.
Allow the user to select layered sections of content to display within the same space.
A tag allows the user to interact with or dismiss a status or classification.
A text field allows the user to enter and edit text.
A tooltip displays the name of or description for a related element on demand.