Components

A padded block that groups related content, such as a summary metric or a set of settings. It has no border or background of its own unless it is a link.

Centers page content with inline gutters and a maximum width. Use it inside Layout.Main or any region that needs a centered column.

Divides the available width into up to 12 equal tracks that respond to the grid's own width, not the viewport. Use it for card layouts and forms; wrap it in Container for a centered width cap.

Arranges a page into header, side regions, main content, and footer, with the document as the scroll container. Routing and navigation state stay in the application.

Stacks a page's content with consistent spacing (semantic.dimension.space.gap.large, 24px). It renders a div, not a landmark.

The title area at the top of a page, with an optional description and page-level actions.

A bounded region with native scrolling and custom scrollbars, such as a long list inside a panel. Not for page scrolling or virtualized lists.

A named part of a page, with an optional separator line semantic.dimension.space.gap.large (24px) below its content. Section adds no border, padding, or width cap.

A thin line that divides groups of content. Screen readers announce it as a separator.

Lays out children in a column or a row with even spacing from the gap scale. Use it for most one-dimensional layouts; for columns that align across rows, use Grid.

A tree of nested folders and files, for browsing the contents of an artifact or repository. For links between the areas of an app, use Side navigation.

Navigates to another page or location. For actions that don't navigate, use Button; for a link that looks like a button, use ButtonLink.

A horizontal list of links for site or app navigation, with optional submenus. For a header that combines it with branding and actions, see Top navigation.

Previous and next links for moving through a long list in pages, with an optional position summary.

Shows the current project and opens a menu to switch to another or create one. Place it at the top of a Sidebar or Top navigation.

A vertical list of links between the main areas of an app or documentation site, optionally in labeled groups. For a collapsible app sidebar, put it in a Sidebar.

A desktop app sidebar that collapses to a rail of icons and stays usable when collapsed. On small screens, show the same destinations in a Drawer instead; see the responsive navigation recipe.

Links to the sections of the current page, usually in a side region of a long page.

Switches between panels of related content in the same place, such as the sections of a record. Only one panel is visible at a time. To switch a setting instead of content, use Segmented control.

The header bar of a site or app, with regions for identity, navigation, and actions. Arrange the regions with your own CSS; this page has recipes to start from.

Triggers an action, such as saving a form or opening a dialog. For navigation, use Link, or ButtonLink for a link that looks like a button.

An icon button that copies a value to the clipboard and confirms the result. Use it next to IDs, keys, and commands.

A button that shows only an icon, for compact or frequently repeated actions. When space allows, prefer a Button with a visible label.

A row of buttons for switching between two to five related options, such as views or periods. Exactly one is pressed. To show different panels, use Tabs.

A full-width button for signing in with an identity provider, such as Google. Supply the provider's logo; Elanor doesn't include provider artwork.

A control for turning an option on or off, or for selecting several items from a list. For one choice from a set, use Radio; for a setting that applies immediately, use Switch.

Labels a text control, such as Input or Text area, with an optional description and error. For checkboxes, radios, and switches, use Selection control and label.

A button that opens a list of options to choose from, like a native select. Use it for one or more choices from a known list; add search when the list is long.

Connects a label, a control, help text, and validation messages, so assistive technology announces them together. For a label, description, and single error, Control and label is shorter.

Groups related controls, such as a set of checkboxes or radios, under one visible label. For a single control, use Field.

Validates its Fields together on submit and focuses the first invalid one. It adds no layout; arrange its content with Grid and Stack.

A single-line text field. Always pair it with a visible label, using Field or Control and label.

A one-time code entered one character per slot. Supports paste and one-time-code autofill. For longer values, such as API keys, use Input.

A set of options where exactly one can be selected. For two to five visible options, use Radio; for longer lists, use Dropdown.

Places a Checkbox, Radio, or Switch next to its label and makes the label clickable. For text inputs, use Control and label.

Turns a setting on or off, taking effect immediately. For choices that apply when a form is submitted, use Checkbox.

A multi-line text field for longer input, such as descriptions or comments. Pair it with a visible label, using Field or Control and label.

A text input for search queries, with a search icon. Use it to filter a list or start a search.

Places a search input and filter controls in one row above a list or table. Controls wrap to fit the available width, and narrow bars can move the filters into a drawer.

A search that opens in a modal dialog, with the field at the top, results as you type, and key hints at the bottom. Use it for site or documentation search. For filtering a list on the page, use Search.

A filter input above a list that is always visible, for picking one item from many without a popup. It's a composition of SearchableDropdown parts, not a separate component.

A trigger that shows and hides a panel. Unstyled, so components and applications bring their own look; for a styled one, use Progressive disclosure.

A modal panel that slides in from a screen edge, such as a bottom sheet or mobile navigation. It traps focus, locks page scrolling, and can be swiped away.

A button that opens a list of actions, such as rename or archive. For choosing a value, use Dropdown; for site navigation, use Navigation menu.

A dialog that opens on top of the page and blocks it until closed. Use it for focused tasks and confirmations; for supporting content next to the trigger, use Popover.

A small panel anchored to its trigger, for extra information or a few controls. The page stays usable while it's open. For a task that needs full attention, use Modal.

A button that shows and hides a panel of secondary content, such as advanced options. Keeps the default view short.

Shows labeled values, such as the details of a record. Renders a description list (<dl>).

Shows data in rows and columns for comparing records. For a single record's details, use Key value.

Explains why a view has no content and what to do next, such as an empty list or a search without results.

Shows a measurement within a known range, such as storage or budget used. It doesn't show task progress.

A placeholder in the shape of content that is still loading, so the layout doesn't shift when it arrives. For waits longer than a few seconds, show a status message instead.

A quotation from another source, set apart from the surrounding text by an indent and a large opening quotation mark.

Shows code or a command, such as an install step or an example, on one or more lines. Long lines scroll horizontally. For code within running text, use Inline code.

Stresses a word or phrase in running text, changing how the sentence reads. For importance rather than stress, use Strong.

A section heading. level sets its place in the document outline; size sets how large it looks.

A picture in content, such as a screenshot or an illustration in documentation. It scales down to fit its container, keeps its aspect ratio, and centers when it's narrower.

Code, file names, and commands within running text. For code on its own lines, use Code snippet.

Shows keys to press, on their own or as a combination. Use it in running text, tooltips, and menus that list shortcuts.

A heading with a button that copies a link to it, for long pages that people share by section, such as documentation. For other headings, use Heading.

A bulleted or numbered list of short items in running text. For navigation, use Side navigation; for records with several values, use Table.

A container for long-form content, such as documentation, articles, and release notes. It switches the text inside to the prose style and spaces the blocks inside, so they need no margins of their own. For application UI, use Stack and the components' own spacing.

Marks text of strong importance, seriousness, or urgency within running text. For stress that changes the meaning of a sentence, use Emphasis.

Body text. Renders a paragraph by default.