Our typographic system creates hierarchy through differences in size and weight of textual elements on the page. A successful hierarchy uses a succinct set of size and weight combinations to both create points of focus and outline the content of a page in an easily scannable structure.
Buttons are used to perform actions, such as: “submit”, “merge”, “create new”, “upload”, etc. The button’s label expresses the action triggered by its interaction. Do not use buttons as navigational elements. Instead, use links to direct users to a new page.
Button switches are used to alternate or filter between views of related content, while only one content section is shown at a time. Unlike tabs, they are often used for switching between different formatting, like a grid view or table view, or filtering the content by categories, such as "Resolved" and "Unresolved" comments.
Icon buttons are used to perform classic system interactions, such as "save", "print", "download", etc. A system icon is used as the button's label, and it should express the action triggered by its interaction. Like a normal button, icon buttons follow a similar hierarchical system.
Links are navigational elements, used to direct users to a new page. They can either be presented inside of a paragraph, by themselves or grouped in a list or menu. The link's label suggests what page users are being linked to.
Tabs are used to alternate between views within content that were segmented into multiple sections while staying in the same place on the page. The content from each tab should be related and form a coherent group.
Tags help users to organize, categorize, or label content, such as lists, table rows, cards, etc. More than one tag can be used per content, and short labels are preferred for easy scanning. Avoid using more than two words per tag.
Selection controls are used when users must make decisions or declare preferences, usually on dialogues, filters, or settings pages. There are three types of selection controls: checkboxes, radio buttons, and toggle switches.
Text fields are a type of form used when users must input or edit data through an interaction with the keyboard. They can be used for either short or long-form entries.
Selectors are a type of form used when users must input or edit data through a predetermined set of options. They can be used for either one or multiple-selection items. Interacting with a selector triggers a dropdown list to appear, from where users can select the desired option(s).
Tooltips are used to provide brief supplementary information or help about a specific element. They are triggered by users hovering or focusing via keyboard on the element it's paired to.
Modals are used to direct users' attention to critical information or action that needs to be taken before they proceed with the user flow. They are displayed on top of the page and block further interactions with the content underneath, which is dimmed by an overlayed dark color.
Data tables are used to organize and display tabular data across rows and columns. It's a dense way of visualizing data.