Components

Brand Buttons are used as triggers for actions. It can contain a label and/or an icon and come in a variety of styles and sizes.

Icon buttons are triggers for actions. They are visual, clickable elements that represent and provide access to functions, commands, files, devices or directories, as well as common actions.

Split button combines a default action button with a dropdown menu of other possible actions.

Menu allows a user to view a list of actions and make selections between them. Menus can also include radio buttons and checkboxes.

Segmented control allows users to make a single selection from a closely related linear list of two to five options.

Badges are noniteractive, small, visual indicators used to provide brief supporting information at a glance about an element’s status or number count.

Filters allow users to dynamically filter data and/or content.

Loaders provide feedback to users when content is loading or processing.

Multi-step trackers indicate a customer’s progress through a series of linear, discrete steps.

Notifications are important messages to users. Messages maybe dismissible, link out to help and have a variety of statuses.

Progress trackers visually guide users toward completion and gives them a sense of achievement.

Non-actionable, brief informative message or tip.

Text inputs with modifiers that allow the ability to input data in a structured format.

A search field is a text input enhanced for finding results.

Text inputs allow users to enter text into a field. They typically appear in forms and dialogs.

Accordion is a vertical stack of interactive headings that allows users to expand and collapse information to show the full content.

Cards are flexible-size container that display content and actions on a single topic. They can display preview of information.

A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.

Modals are components that take focus and overlay on top of other content on the page.

Tabs consist of two parts: a tab and tab panel. Tabs allow users to navigate between related views.

Breadcrumbs are a secondary navigation method that shows content hierarchy or traces someone’s path.

CTA links are often used for marketing purposes, such as increasing conversions, leads, or sales. 

Use the inline link component when your link is in a paragraph or sentence.

Links should navigate you to a new page or to further information on the page.

Navigation can help customers to navigate the site and guide them to tasks they want to perform.

Navigational Tabs group related pages or sections within the same product. Selecting a tab loads a new page or URL route, while keeping users within the overall navigation experience.

Pagination is a way to navigate between related content, such as tables, filtered lists or search results across multiple pages.

Checkboxes allow users to select any number of choices, or none, within a list of independent options.

Date pickers enable a customer to select a single date or a date range, such as a payment date or a statement period requiring start and end dates.

Multiple select allows users to make a multiple selection from a dropdown list of five or more items.

Radios allow users the ability to make a single selection within a group list of two or more options.

Single select allows users to sort existing content or to make a single selection from a dropdown list of six or more items.

Slider allows a user to move the handle along a horizontal track to increase or decrease the value within a set range.

Stepper control allows the users to input a numeric value and incrementally increase or decrease the value.

Tags are interactive elements used to show categories for a piece of content.

Toggle Switch allows users to toggle a boolean selection between states instantly.

Tables make it easier for users to compare and analyze data.