Components

Triggers an action. Primary and secondary, seven sizes, loading state and icon slots.

A set of related buttons joined as one control, for switching views or options.

A compact button with only an icon, for toolbars and dense layouts.

A single-line text field with label, hint, sizes and error state.

A multi-line text field for longer answers and notes.

A field that turns each entry into a removable chip, for tags and recipients.

Lets people pick any number of options from a list.

Lets people pick exactly one option from a short list.

Switches a single setting on or off, with immediate effect.

Picks one value from a long list in a compact dropdown field.

A button that opens a short list of actions or options.

Picks items from nested groups, such as regions or departments.

Chooses which columns a table shows and in what order.

Sets a value or a range by dragging along a track.

Uploads files by drag and drop or by browsing.

Checks field values and shows clear, inline error messages.

A month view for picking a date or a date range.

Daily and weekly views of events, with a side panel and header actions.

Shows who is free when, across people and hours.

A person's photo or initials, in several sizes.

A stack of avatars for teams and shared items, with an overflow count.

A large avatar with an upload control for profile photos.

A count or short status on top of another element.

A rounded label for categories, filters and states.

A bar that shows progress while content loads.

A small spinning indicator for short waits.

A focused window for confirmations, forms and decisions.

A short message that confirms an action, then disappears.

A small panel anchored to an element, with richer content than a tooltip.

A short hint that appears on hover or focus.

Lists of actions or links, horizontal or vertical, with submenus and groups.

Switches between related views on the same page.

Moves through long lists one page at a time.

Rows and columns with sorting, filtering, selection, tree rows and editing.

A responsive layout for arranging cards and content in columns.

Boards of columns and cards that move through stages.

Shows an attached file with its type, name and size.

Bar, line, donut, gauge and matrix charts, with slicers and cross-filtering.

A map that colors regions by value, for data by country or area.

An interactive map with markers for places and addresses.