Esc

    ↑ ↓ to move, Enter to open

    TR

    Components

    Merid's components are grouped by what they do. Each has its own page with a live preview, props, keyboard interactions and usage guidance.

    StableAPI settledBetaReleased, API may still changePlannedOn the roadmap

    Inputs

    ButtonPrimary, secondary, ghost, danger and link actions.StableIconButtonSquare button for a single icon with a required label.StableLabelAccessible label for a form control.StableFieldLabel, helper text and error message for any control.StableInputSingle-line text field with invalid and disabled states.StableTextareaMulti-line text field.StableNativeSelectStyled native select element.StableSelectChoose one option from a custom listbox.StableCheckboxToggle an independent option.StableRadioChoose one option from a small visible set.StableSwitchTurn a setting on or off immediately.StableSegmentedControlSwitch between a few views or modes.StableCalendarMonth grid for picking a day or a range, localised with Intl.StableComboboxSearchable select with single, multiple and async options.StableDatePickerTyped date field with a calendar popover; single day or range.StableFileUploadAccessible file picker with a drag-and-drop zone.StableNumberInputNumeric field with steppers and Intl.NumberFormat.StablePinInputOne-time code entry, one cell per character.StableSliderPick a value or a range on a track.StableToggleGroupToggle buttons, alone or as a single or multiple set.StableToolbarA row of related controls with one Tab stop.Beta

    Layout

    ContainerCentres content at the container width with gutters.StableSectionVertical page section with consistent padding.StableStackVertical or horizontal spacing on the token scale.StableGridResponsive column grid.StableCardTray or elevated surface for grouped content.StableSeparatorA 1px hairline between regions.StableScrollAreaNative scrolling with thin, themed scrollbars.Beta

    Typography

    HeadingTight, balanced headings at each level.StableTextBody text in the three tones.StableCodeInline code.StableKbdKeyboard key.StableVisuallyHiddenContent for assistive technology only.StableShortcutPlatform-aware key combination such as ⌘K.Beta

    Data display

    TableTabular data with hairline rows and tabular numbers.StableBadgeShort status or count in six tones.StableAvatarImage or initials for a person or organisation.StableAccordionStacked disclosure sections.StableTabsLine tabs for switching panels.StableEmptyStatePlaceholder when there is nothing to show yet.StableCollapsibleShow and hide one region.BetaDataTableSorting, filtering, pagination and row selection on Table.Beta

    Feedback

    AlertInline notice in info, success, warning or danger tones.StableToastBrief, non-blocking confirmation.StableProgressDeterminate progress bar.StableSpinnerIndeterminate progress for short waits.StableSkeletonPlaceholder shapes while content loads.Stable

    Overlay

    DialogModal window for a focused task.StableAlertDialogModal confirmation that requires a response.StableDrawerPanel that slides in from an edge.StablePopoverNon-modal floating panel anchored to a trigger.StableTooltipShort label on hover and focus.StableDropdownMenuList of actions opened from a button.StablePortalRender children into document.body.StableCommandSearchable command menu and ⌘K palette.BetaContextMenuRight-click menu of actions.BetaHoverCardPreview card on hover or focus of a link.Beta
    LinkInline and standalone links.StableBreadcrumbThe current page's position in a hierarchy.StablePaginationMove between pages of results.StableStepperProgress through a multi-step flow.StableSidebarNavGrouped vertical navigation for app sidebars.StableNavigationMenuTop site navigation with drop-down and mega menus.Beta