Components
Every component below is rendered with the canonical SCSS classes shipped from @mozaic-ds/styles. Open one to see a live demo and the markup behind it.
60Components
6Categories
SCSSFirst-class
Action
Form
Text InputSingle-line text entry. Supports prefixes, suffixes, errors, and disabled state.TextareaMulti-line text entry with the same affordances as the text input.FieldForm-field wrapper: label, helper text, error message, required indicator.CheckboxBinary selection control. Supports indeterminate state.RadioSingle selection from a set of mutually exclusive options.ToggleOn/off switch. Use when the change takes effect immediately.SelectDropdown selection from a list of options.Password InputText input with show/hide toggle and validation hints.Phone Number InputPhone entry with country code prefix.Pincode InputSegmented input for short codes (OTP, verification).Quantity SelectorNumeric stepper for ordering quantities.File UploaderFile picker with drag-and-drop, file list, and progress feedback.DatepickerDate selection input with calendar picker.Star RatingStar-based rating input (1–5).Segmented ControlHorizontal group of mutually exclusive buttons.Controls OptionsGroup of selectable option cards/buttons.ComboboxText input with autocomplete dropdown.ListboxSelectable list of options. Useful for non-dropdown selection.Option ListboxListbox with richer per-option content (icons, descriptions).
Feedback
Status MessageInline message conveying state — info, success, warning, danger.Status NotificationPage-level banner notification with optional dismiss.ToasterTransient floating notifications stacked at the corner of the screen.CalloutStandalone block to draw attention to content or actions.TooltipContextual hint shown on hover or focus.ModalDialog window that interrupts the flow to request a decision.DrawerSlide-in panel anchored to the screen edge.PopoverFloating content panel anchored to a trigger.OverlayDimming layer used behind modals and drawers.LoaderSpinner for ongoing operations.Loading OverlayLoader rendered on top of content to block interaction.Circular ProgressbarCircular progress indicator for determinate operations.Linear Progressbar (Percentage)Horizontal progress bar with percentage value.Linear Progressbar (Buffer)Horizontal progress bar with buffer ahead of the current value.
Navigation
BreadcrumbTrail of links indicating the current location in a hierarchy.TabsGroup of related panels switched via tab headers.PaginationPage-by-page navigation for long lists.Stepper (Bottom Bar)Multi-step flow with anchored bottom bar.Stepper (Compact)Compact horizontal multi-step indicator.Stepper (Inline)Inline multi-step indicator with labels.Stepper (Stacked)Vertical multi-step layout with details per step.SidebarVertical navigation rail.Built-in MenuNested menu typically used in headers.Action ListList of actions, often inside menus or popovers.Accordion ListStacked accordion items with one or many open at a time.Action Bottom BarAnchored bar at the bottom of the viewport for primary actions.Navigation IndicatorSmall indicator showing the active position in a sequence.Page HeaderTop-of-page region with title, description, and actions.
Status
Status BadgePill displaying a status keyword.Status DotCompact dot indicating a status state.Number BadgeCompact count indicator typically used on icons.TagRemovable label used for categorization or selection.FlagCountry/locale flag asset.AvatarUser or entity portrait with fallback initials.KPI ItemSingle key performance indicator with label, value, and trend.