Components Overview

Overview of the Instinct Design System component library. Select a component to view its design specs, variants, and usage guidelines.

Inputs

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.

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.

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.

Data display

Avatar

Represents a person, user, or entity with sizes and states for navigation and profiles.

Data tables

Dense, scannable grids for records with sorting, alignment, and row-level actions.

Feedback

Alerts

Inline banners for success, warning, error, and informational messages on a page.

Modal

Focused overlays for confirmations, short forms, and tasks that need full attention.

Breadcrumbs

Shows location in a hierarchy and quick navigation back to parent levels.

Header

Soon

Global app bar with branding, primary navigation, and account or utility actions.

Pane

Split layouts and resizable regions for lists, detail views, and tools side by side.

Pagination

Soon

Move through multi-page tables and lists with numbered pages and next/previous controls.

Tabs

Switch between related views or settings without leaving the current screen context.

Surface

Accordion

Progressive disclosure for grouped content—expand one or more sections as needed.

Layout

Divider

Separates regions, list groups, and dense content while keeping the layout scannable.