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.
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.Stable
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.Stable
Typography
HeadingTight, balanced headings at each level.StableTextBody text in the three tones.StableCodeInline code.StableKbdKeyboard key.StableVisuallyHiddenContent for assistive technology only.Stable
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.Stable
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.Stable