Components

Alerts

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

Box

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

Buttons

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

Chips

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

Fields

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

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

Lists organize information.

Loaders

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.

Menu

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

Modals

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

Navbar

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

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

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

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

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

Tags

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

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

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...