Components
Native building blocks for your interface. Try the preview, copy the Rust usage, and find the options and actions in each guide.
Set up the design system, or explore composed patterns.
Primitives5
Text
A line or a paragraph of passive text, sized by a role of the type scale and colored from the palette.
Separator
A passive one-pixel rule in the palette's border color, between two regions or two groups of tools.
Icon
A semantic icon name, such as Icon::Trash or Icon::Search. Components take an Icon and the backend chooses the artwork, which is Bootstrap Icons unless the host gives another set.
Drawing
What the application draws itself, for a shape no component makes: a track's waveform, a meter, a sketch. It draws in the frame's own commands, the ones every component is drawn in, so any backend paints it.
TextLayout
Text that limn shapes, breaks into lines and places itself. Where the caret goes, what a selection covers and the glyphs a backend draws all come from one layout, so they always agree: no backend lays the text out again.
Actions7
Button
A labelled action. Eleven variants and seven sizes, optional icons before and after the label, a hint, and disabled, loading and active states.
ButtonGroup
A set of actions that sits in a row when there is room and in a column when there is not, such as the foot of a dialog. The group owns the order, spacing and alignment of the buttons it is given.
Toolbar
A bar of commands in groups. It decides the height, the space between controls, the rule between two groups and the size of every control in it, so that a host does not assemble rows, separators and paddings by hand. Use it over a document or a pane, or down the side of a window.
Clipboard
A button that copies a link, a key or a path. Its icon turns into a check while the host says the copy was just made.
Link
A text action that hugs its label: link ink, underlined under the pointer and with keyboard focus, and no hover fill.
Kbd
Passive keycaps for a keyboard shortcut such as Ctrl+Shift+P, with an optional caption that says what the keys do: the hints in the footer of a palette or a suggestion list.
MessageActions
The quiet row of icon actions under a chat message: copy, retry, edit. Ghost icon buttons 24 px high and 2 apart in muted ink, with muted captions and an overflow menu for what is used less.
Inputs16
TextField
A single line of text: a name, a path, a password. For several lines use TextArea, and for a query use SearchField.
FormField
A label over a control, with the hints and the error that belong to it. The host builds the control and owns its value; the field owns the order and the spacing of the text around it.
TextArea
Several lines of text: notes, instructions, a message. For one line use TextField.
SearchField
A text field with a magnifier and an optional shortcut hint, for a query the host searches with.
Select
A button that shows the current choice and opens the list of the others. Use it to choose one of a few options where a SegmentedControl would not fit.
Switch
An on/off control for a setting that takes effect at once.
Checkbox
A box that is checked or not, with a label beside it: one of several options that can each be chosen, or a statement to agree to. For a setting that takes effect at once, use a Switch.
RadioGroup
One choice among several, all of them in view: a circle for each option, with a dot in the chosen one. Use it for two to about seven options that deserve to be read before choosing; for a few short ones in little space, a SegmentedControl does the same, and for many, a Select.
Toggle
A button that stays pressed while something is on: a filter, a pinned panel, a text style. ToggleGroup joins several in one row, of which any number may be pressed at once.
NumberInput
A field for a number, joined to a button that lowers it and one that raises it. Use it for a quantity, a size or any value that is typed as often as it is nudged.
SwatchPickerNew
One color among a few, all of them in view: a round swatch for each, with a ring around the chosen one. Use it for an accent, a label or a role color taken from a set; add a custom swatch when a color of the user's own is allowed too, and open a ColorPicker from it.
ColorPickerNew
A color chosen by hand: a field whose thumb sets the saturation, across it, and the value, up it; a bar whose thumb sets the hue; and a field for the color's hex digits. Use it where any color is allowed, often in a popover opened from a SwatchPicker's custom swatch.
Slider
A value dragged along a track, from 0 to 1: a seek position or a volume.
DatePicker
A field for a local calendar date as YYYY-MM-DD over a month calendar to choose it from. Use it inline, in a form or a dialog; it does not open or close.
TimePicker
A field for a local time of day as 24-hour HH:MM, with arrows that step the hour and the minute.
DateTimePicker
A DatePicker over a TimePicker, each under its label, for a local date and time. The two keep separate values and IDs, so one half can be half typed while the other changes.
Navigation14
Tabs
A row of tabs for switching between views, with a selection that slides to the active one. TabStrip is the other kind: folder tabs for open resources, such as files, that scroll sideways and open onto the body beneath them.
SegmentedControl
Tabs in one rounded track, for choosing one of a few options that are all visible at once.
Stepper
The steps of a short, ordered form: a round badge for each step, a rule from each badge to the next, and the step's label.
Breadcrumb
A path through a hierarchy: folders, then the current resource. Segments with an action are links, and the last segment is the current one.
Collapsible
A header that shows or hides content beneath it. Use it for detail that is not always needed: a list of changed files, the steps of a tool call.
Accordion
Several titled items one under another, each of which opens to show its content. Use it for a list of questions, or for the groups of a settings page, where a reader wants one or two parts at a time.
ChatMinimap
A conversation's turns as a rail of short marks beside it, to see where you are in a long one and jump to another turn.
Pager
Two arrows around a position label such as "3 / 12", for stepping through a sequence: pages, search matches, changes.
Pagination
Numbered pages between a previous and a next arrow. Use it under a list or a table that is shown one page at a time, where a reader may want to jump to a page as well as step to the next.
MenuBar
The application menus across the top of a window: a row of triggers, one of which may be open. In a narrow window the same menus fold behind one button.
StatusBar
The bar at the foot of a window: cells of status, of which the trailing ones give way by priority when the window is narrow.
WindowControls
The buttons at the end of a window's own title bar, for an app that draws its frame in place of the system's: minimize, maximize and close, in that order, as Windows places them.
NavigationBar
A pill-shaped desktop bar of workspace dots, a two-line clock and status actions, on the palette's surface.
TopBarNew
The bar across the top of a window, laid out as a music app's: your controls at the start, such as back and forward; a round Home button and a wide search in the middle of the window; your controls at the end, such as notifications, settings and the account. Use it as a window's first row.
Data12
ListRow
One entry of a list: an icon, a title, an optional second line and what sits at its trailing edge, all under one hover surface.
TreeRow
One row of a file, project or task tree: the guides that show its depth, an icon, a title, and what a folder shows at its end. The host owns the tree; TreeRow draws one visible row of it.
Table
Rows of cells that line up under a header of column labels, for a list the user sorts, filters and reshapes. The host owns the rows and every choice; the table lays them out and reports what was asked.
DescriptionList
Pairs of a label and its value, for the details of one thing: an order, a server, a person. Use it for a handful of facts that are read, not edited; for many things with the same facts, use a Table.
Markdown
Renders a bounded subset of Markdown as an ordinary element tree. Use it for text that arrives as Markdown, such as a message, including while it is still being written.
Diagram
A flowchart or a sequence diagram drawn by the engine from Mermaid source. Diagram is an enum over the two kinds, Flowchart and SequenceDiagram, for a host that is handed a source without knowing which it is.
CodeBlock
The card that holds a block of code inside prose: wrapped, monospaced and passive, under an optional label such as the language.
OutputBlock
Read-only monospaced output of a command or a tool, bounded however much text it is given.
CodeEditor
A code editor over a text buffer the host owns: carets and selections, undo, line numbers, syntax colors, and optional soft wrap, minimap, status bar and Vim mode. The host opens and saves files; the editor never touches one.
CodeDiff
A read-only view of the rows of a diff: line numbers, a mark for each added or removed row, and the text. It scrolls and builds only the rows in view.
Charts
Read-only charts for data the host already has: BarChart and ColumnChart compare categories, LineChart and AreaChart follow a measure along an axis, PieChart shares out a whole, RadarChart compares series over several axes, HeatmapChart shows intensity over a grid such as a calendar, and ChartLegend explains a color scale. They take no clicks and add no tab stops; the pointer over a chart marks what it is nearest and shows its values.
Attachment
A card for a file or an image attached to a message or a draft: an icon or a preview, a title and a description, and optionally a button that removes it.
Layout15
Card
A raised surface that sets one group of content into the page. The host builds the content; the card adds the padding, the hairline and the corners.
FramedCard
A card that stands on a frame a shade apart from it, with a foot on the frame under the card. Use it when a status and an action belong to the whole card and not to its last row.
ScrollArea
A viewport that scrolls content taller than itself, with a vertical scrollbar. It also builds long lists, of rows of one height or of rows that each take their own, only the rows in view.
MediaTile
A tile of a grid or a shelf of albums and artists: square artwork over a one-line title and a muted second line, all under one hover surface.
CarouselNew
A shelf of items that scrolls sideways inside a page that scrolls down, under an optional heading: the rows of a music app's home page. It has no arrow buttons; the pointer moves it.
MediaCard
A track as a card: its record sleeve beside its title and artist, over a tint the host takes from the artwork. The sleeve is the control that plays it.
PageHeader
The heading of a page: a title, an optional description, and elements the host owns before and after them.
SectionHeader
The heading of a section: a title, a count right after it, and a detail and a trailing element at the far end. With an action the whole row is a button that can fold the section.
PageColumn / CardGrid
The layout of a page, in two types: PageColumn is a scrolling page whose content is a centered column of bounded width, and CardGrid lays cards of equal width in rows inside it. Both are passive.
PanelHeader
The header row of a panel: a title that takes the width left, the panel's tools after it, and optional back and close buttons at the ends.
SidebarPanel
The body of a sidebar: its blocks in a column, inset from the edges, on the palette's surface.
ResizeHandle
The strip between two panes that the pointer drags to move their boundary. It reports the drag; the host, which owns the panes' sizes, moves them.
SideRailNew
A sidebar's library folded into a narrow column of pictures, for an app whose sidebar the user can fold away: one picture for each playlist, album or person, named by a hint at its side.
PeekPanelNew
What is left of a side panel the user has closed: a strip at the window's edge through which the panel's content can barely be seen, that reaches out under the pointer and opens the panel when it is clicked.
PreferencesGroup
A card of settings rows separated by hairlines, under a small muted label. Its rows are ActionRow: a title, a subtitle, an icon and a control at the end.
States15
Empty
The state of a page, pane or result list with nothing in it: an icon, what is missing, why, and the next step. It is centered and has no frame of its own, so it sits on whatever surface it is given.
Notice
A left-aligned inline notice that stands where a pane's content would be: an optional icon, a title, a reason, and controls the host owns. Use Empty for a centered blank slate and Alert for a toned banner.
Alert
A persistent inline notice in one of five tones, with an optional action and a dismiss button. It has no timer and takes no focus: it stays until the host stops rendering it.
Progress
A thin bar for work whose completed share is known. For work of unknown duration use a Spinner.
Spinner
A rotating indicator for work of unknown duration. When the completed share is known, use Progress.
Skeleton
A pulsing placeholder in the shape of content that is loading. Use it when the shape is known before the data; for work with no shape to show, use a Spinner. SkeletonGroup is the same for the rows of a list.
TextShimmer
A line of text with a highlight moving across it, for work in progress that has a name: "Reading files", "Thinking".
Marker
A one-line event in a conversation or a log: a branch created, a tool running, the model thinking. The host supplies the label and the state; the marker infers nothing.
Ticker
A fixed-height, clipped slot that shows the latest of a series of lines, such as the current step of running work. The slot never changes height, so content below it does not move.
Collapse
A slot in the flow that closes when its content leaves, so what follows glides up instead of jumping by the content's height. Use it for content that comes and goes with the application's state, such as the live output of running work.
Chip
An inline pill for a count, a label or a state: a tag, a plan name, "Online". It is passive, with no pointer and no focus, unless you give it a remove button, which is then its only control.
Badge
A small mark over the top right corner of another element, such as an icon button or an avatar, that says there is something new or how many. It is passive: the element under it works exactly as it does without the mark.
Avatar
A round account photo, or the initial of a name where there is no photo.
AvatarGroup
Several people as avatars that overlap in a row, with a count for those that do not fit. Use it where who is here matters more than each name: the members of a project, the people who answered.
ContextWindow
What fills a model's context window: the figure in use, a field of cells shared out among the shares, one row for each share with its count, and a foot with a status line and an action.
Overlays11
Popover
A floating surface anchored to any element, for content of the host's own: a short form, a share panel, a list. For a list of actions use a DropdownMenu.
DropdownList
A floating list for choosing one option, with the current one marked. For a list of actions use a DropdownMenu.
DropdownMenu
A menu of actions that opens from a trigger: items with icons and shortcuts, headings, separators and submenus. To choose one value of several use a DropdownList.
ContextMenu
A menu opened by a secondary click on an element, for the actions that apply to that element.
Modal / AlertDialog
A centered surface over a dimmed window that takes the keyboard until it is answered. There are two types: Modal for a form or other content, and AlertDialog to confirm a consequential action.
BottomSheet
BottomSheet is a controlled modal for phone actions and short forms. It reuses Modal's scroll composition and Popover's backdrop, focus scope, restoration, interruptible transitions and reduced-motion behavior. It meets the bottom of the host's viewport, with full width on phones and a preferred width of 560 on larger windows. It leaves at least eight logical pixels clear above it.
Toast
A brief card in the bottom right corner of the window that announces something that happened: a save, a copy, a failure.
ImageViewer
A picture shown over the whole window, alone or as one of a gallery, with optional zoom. Use it when a thumbnail or an attachment is opened.
SuggestionList
Completions floating over a text input while the user keeps typing: commands after a slash, mentions, file names. Focus stays in the input.
Tooltip
A hint for a control: its name, its shortcut and, when needed, a sentence on what it does. It appears after the pointer rests on the control for 350 ms, or at once with keyboard focus.
Tour
A guided tour points at controls that already exist and explains them one at a time. CoachMark is one step: a bubble with a caret towards a control and a ring around it. Tour is a sequence of them. Tours covers both in depth.