Alerts are used to provide feedback and information to users. They come in a variety of styles and colors to fit specific use cases.


Boxes provide a simple container for other elements. They can be customized with headers and footers


Buttons allow users to take actions within a product. Denali buttons come in a variety of styles, sizes, and states.


Chips are used to highlight important text information. They come in two sizes and their color can be customized.


Fields allow users to enter text information. They come in two styles, inline and text area. Buttons and icons can be added to both field styles.


Links connect pages to each other and allow users to perform actions within a page. They come in a variety of sizes and styles and can be used together with ...


Lists organize information.


Loaders signify that content is being loaded or up-loaded on a page. They come in a variety of sizes and styles and can be added to buttons.


Menus contain discoverable content such as links and user information. They can be aligned to the left or the right.


Modals overlay pages to display secondary information. They come in default and fullscreen styles and can be customized with a header and footer.


The Navbar is a horizontal bar that serves as the primary navigation for your product or site. Denali's navbar is versatile and responsive. It can contain a ...


Search fields allow users to search for content.

Selection controls

Selection controls allow users to make decisions via controls such as switches, radio buttons, and checkboxes.


Selects are used to store selectable options and collect user input. They come in a variety of sizes and states. Their labels can be positioned either to the...


Tables organize information in columns and rows. Table cells can be aligned to the left, center, or right. Stripes can also be added to tables to differentia...


Tabs provide additional navigation within a page or sub section of a page. They are available in primary and secondary styles.


Tags display descriptive text information. They come in solid, outline, and selectable styles. Tags can be grouped into scrolling or wrapping lists. Icons ca...


Titles are stylized headings that call out important information or data. They are comprised of a title bar, headline, and caption. Title text styles and col...


Toggles are a group of selectable options that are related to each other. The options are contained within a single component and one option is always select...