Skip to content
7 Seventh UI CSS

Components

Bitbucket Figma

Components

Traceable inventory from the Figma Components page, node 1:3. Component implementation starts only after each section has a dedicated spec.

Inventory

Component Figma node Detected scope Spec Implementation status
Button 636:1644 Text buttons, icon buttons, danger buttons, themes, sizes, and states. .specs/006-component-button implemented
Input 894:2558 Light and dark themes with fill, compact, hover, success, error, focus, disabled, and read-only states. .specs/007-component-input implemented
Checkbox 930:4101 Native checkbox control with checked, unchecked, indeterminate, disabled, hover, focus, and helper text states. .specs/018-component-checkbox implemented
Radio 930:4101 Native radio control with grouped choices, checked, unchecked, disabled, hover, focus, and helper text states. .specs/019-component-radio implemented
Switch 930:4101 Native switch control with off, on, disabled, hover, focus, label, and helper text states. .specs/020-component-switch implemented
Divider 841:1916 Horizontal and vertical dividers with full-width, inset, middle-inset, and subhead variants. .specs/021-component-dividers implemented
Tag 1300:7285 Status, custom, and entity tags with light/dark status colors and action slots. .specs/022-component-tags implemented
Segmented Button 2731:4818 Radio-based segmented choice control with 2-5 Figma item layouts and disabled, hover, selected, and hover-selected states. .specs/023-component-segmented-button implemented
Tooltip 828:2975 Plain and rich tooltips with light/dark contrast themes and top, left, bottom, and right arrow hooks. .specs/024-component-tooltip implemented
Toast 841:2020 Transient feedback toasts with basic, info, success, warning, danger, light/dark surfaces, close affordance, and timing guidance. .specs/025-component-toast implemented
Notification 4823:8600 Persistent notification surface with title, body, icon, metadata, action slot, close slot, and light/dark surfaces. .specs/026-component-notification implemented
Dialog 928:3844 Modal dialog surface with scrim, small through extra-large sizes, fixed header/body/footer slots, and accessibility guidance. .specs/027-component-dialogs implemented
Breadcrumb 2411:7111 Simple and header hierarchy navigation with separators, current page, hover states, and collapsed more control. .specs/028-component-breadcrumb implemented
Tabs 1606:6179 Horizontal tab lists with two through eight items, selected/enabled states, panels, and ARIA tab markup. .specs/029-component-tabs implemented
Menu 913:2086 Floating menu surface with item states, selected modes, leading/trailing slots, and status indicators. .specs/030-component-menu implemented
Navigation 2863:9305 Rail, drawer, mobile shell, section header, company block, nav items, grouped items, and themes. .specs/031-component-navigation implemented
Header 4488:19770 Top app header with leading, title, breadcrumb, actions, secondary variant, and product example composition. .specs/032-component-header implemented
Slider 2420:7203 Native range input styling with labels, values, icons, range, semantic marks, ranking, themes, and states. .specs/033-component-slider implemented
Stepper 1192:5628 Horizontal staged progress with checked, active, upcoming/enabled states, markers, labels, and dotted connectors. .specs/034-component-stepper implemented
Data Table 921:2609 Semantic table wrapper with toolbar, filters, row densities, row states, actions, pagination, and scroll containers. .specs/035-component-data-table implemented
List 930:4101 List density variants, list items, leading content, trailing controls, and building blocks. .specs/008-component-list implemented
People Picker 3080:8020 Preencher, focus, single user selection, and multiple user selection states. .specs/009-component-share-multi-selection implemented

Loose Instances

Item Figma node Classification Decision
Box Interface Button 4820:6798, 4820:6810 Usage example candidate Keep out of core implementation until Button and Icon APIs exist.
Complete Home Screen - Campaign Banner 4820:7118 Product composition example Do not treat as a base component for the initial CSS package.

Detailed implementation contracts live in the dedicated component specs and documentation pages linked above.