Components Overview
Overview of the Instinct Design System component library. Select a component to view its design specs, variants, and usage guidelines.
Accordion
Progressive disclosure for grouped content—expand one or more sections as needed.
Alerts
Inline banners for success, warning, error, and informational messages on a page.
Avatar
Represents a person, user, or entity with sizes and states for navigation and profiles.
Breadcrumbs
Shows location in a hierarchy and quick navigation back to parent levels.
Button
Triggers actions with clear hierarchy. Icon and label support, primary and secondary variants, and multiple sizes.
Button group
Groups related actions in one control. Up to six buttons with consistent sizing and shared borders.
Checkboxes
Multi-select inputs with checked, unchecked, and indeterminate states for lists and forms.
Chip
Compact labels for status, categories, and metadata, in chip and pill variants.
Data tables
Dense, scannable grids for records with sorting, alignment, and row-level actions.
Divider
Separates regions, list groups, and dense content while keeping the layout scannable.
Header
SoonGlobal app bar with branding, primary navigation, and account or utility actions.
Icon Button
Compact, icon-only actions for toolbars, table rows, and close controls.
Menu Item
Rows inside menus and dropdowns, with hover, selected, and disabled states.
Modal
Focused overlays for confirmations, short forms, and tasks that need full attention.
Pagination
SoonMove through multi-page tables and lists with numbered pages and next/previous controls.
Pane
Split layouts and resizable regions for lists, detail views, and tools side by side.
Radio buttons
Single-select controls for mutually exclusive options within a named group.
Switch
Binary on/off toggles for settings that apply immediately without an extra confirmation step.
Tabs
Switch between related views or settings without leaving the current screen context.
Text fields
Single-line text entry with labels, placeholders, helper text, and validation states.
Toggle button
Segmented or icon toggles for modes, filters, and toolbars where one option is active.
Typography
The Axon typescale: header, body, and utility styles for all interface text.