AIAIAI Design System

Tabs

Tabbed interface for switching between views without navigation. Uses Svelte context for state management — Tab and TabPanel read active state from the parent Tabs container.

Basic Tabs

Pipeline overview content. Shows DAG visualization, step summary, and metadata.

Disabled Tab

General settings. Name, description, and scheduling.

Tab States

Active
Default
Disabled

TOKEN REFERENCE

--tabs-list-bg: var(--color-surface-secondary) --tabs-list-radius: var(--radius-md) --tabs-trigger-height: 32px --tabs-trigger-font: var(--type-label-font) --tabs-trigger-color-active: var(--color-text) --tabs-trigger-bg-active: var(--color-surface) --tabs-trigger-shadow-active: var(--elevation-raised) --tabs-content-padding-top: var(--space-md)