# Actian Design System

> AI-native design system. Foundations, components, accessibility, content guidelines. Federated knowledge consumed by Figma plugin + docs.

## Foundations

- [Borders](https://volivarii.github.io/actian-ds-docs/foundations/borders.md): Border tokens from the Actian foundations.
- [Breakpoints](https://volivarii.github.io/actian-ds-docs/foundations/breakpoints.md): Responsive breakpoint tokens from the Actian foundations.
- [Color](https://volivarii.github.io/actian-ds-docs/foundations/color.md): Color tokens from the Actian foundations.
- [Design Guidelines](https://volivarii.github.io/actian-ds-docs/foundations/design-guidelines.md): How to apply foundations — usage rules, contrast pairings, spacing rhythm, elevation, and grid behavior. Section 3 of the Foundations master spec.
- [Elevation](https://volivarii.github.io/actian-ds-docs/foundations/elevation.md): Elevation tokens from the Actian foundations.
- [Icons](https://volivarii.github.io/actian-ds-docs/foundations/icons.md): Icon tokens (sizes + colors) plus the full DS-Kit icon catalog grouped by semantic purpose.
- [Motion](https://volivarii.github.io/actian-ds-docs/foundations/motion.md): Motion tokens and named patterns from the Actian foundations.
- [Spacing](https://volivarii.github.io/actian-ds-docs/foundations/spacing.md): Spacing scale tokens from the Actian foundations.
- [Typography](https://volivarii.github.io/actian-ds-docs/foundations/typography.md): Typography tokens from the Actian foundations.

## Accessibility

- [WCAG 2.2 AA guidance](https://volivarii.github.io/actian-ds-docs/accessibility.md): WCAG criteria, contrast, keyboard nav, ARIA patterns

## Content guidelines

- [Content](https://volivarii.github.io/actian-ds-docs/content.md): voice, tone, terminology, and UX-pattern copy guidance

## Categories

- [Action](https://volivarii.github.io/actian-ds-docs/categories/action.md): 
- [Breakpoint, grid & structure](https://volivarii.github.io/actian-ds-docs/categories/breakpoint-grid-structure.md): 
- [Data Display](https://volivarii.github.io/actian-ds-docs/categories/data-display.md): 
- [Feedback](https://volivarii.github.io/actian-ds-docs/categories/feedback.md): 
- [Form (input & selection)](https://volivarii.github.io/actian-ds-docs/categories/form-input-selection.md): 
- [Icons](https://volivarii.github.io/actian-ds-docs/categories/icons.md): 
- [Illustrations & graphics](https://volivarii.github.io/actian-ds-docs/categories/illustrations-graphics.md): 
- [Local components](https://volivarii.github.io/actian-ds-docs/categories/local-components.md): 
- [Navigation](https://volivarii.github.io/actian-ds-docs/categories/navigation.md): 
- [Overlays](https://volivarii.github.io/actian-ds-docs/categories/overlays.md): 
- [Product logos](https://volivarii.github.io/actian-ds-docs/categories/product-logos.md): 
- [White-label services](https://volivarii.github.io/actian-ds-docs/categories/white-label-services.md): 

## Components (categorized DS Kit)

- [Button](https://volivarii.github.io/actian-ds-docs/components/action/button.md): Primary trigger for a specific action or form submission. Use "Primary" for the main task, "Secondary" for alternative actions, and "Ghost/Tertiary" for low-priority tasks.

Primary: "Use as the single most important action on a screen. Limit to one per view (e.g., 'Submit', 'Pay Now')."
Secondary: "Use for supporting actions that are not the main goal of the page (e.g., 'Cancel', 'Back')."
Tertiary/Ghost: "Use for low-emphasis actions or repeated items in a list (e.g., 'View Details', 'Learn More')."
Critical: "Use specifically for actions that result in data loss or permanent changes. Usually styled in Red."
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/action/button/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/action/button/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/action/button/content.md)
- [Link](https://volivarii.github.io/actian-ds-docs/components/action/link.md): A Link visually represents clickable text or elements that navigate users to other pages, sections, or resources. It appears colored to indicate interactivity and follows accessibility and design standards for clarity and usability.

Used for navigation to a different page, an external URL, or to trigger a secondary action within a sentence. Not to be used for primary form submissions.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/action/link/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/action/link/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/action/link/content.md)
- [Sticky footer](https://volivarii.github.io/actian-ds-docs/components/action/sticky-footer.md): A persistent container at the bottom of the viewport used for high-priority global actions (e.g., Save, Cancel, Next) that must remain visible while scrolling.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/action/sticky-footer/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/action/sticky-footer/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/action/sticky-footer/content.md)
- [Avatar](https://volivarii.github.io/actian-ds-docs/components/data-display/avatar.md): Visual representation of a user or entity. Use "Image" variant if a photo exists, or "Initials" as a fallback.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/avatar/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/avatar/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/avatar/content.md)
- [✍️ Badge](https://volivarii.github.io/actian-ds-docs/components/data-display/badge.md): Small status or numerical indicator (e.g., "Active", "New", "+5"). Use for counts or short, non-interactive status labels.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/badge/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/badge/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/badge/content.md)
- [Card for grouped content](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-grouped-content.md): Component documentation for Card for grouped content — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-grouped-content/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-grouped-content/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-grouped-content/content.md)
- [Card for items](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-items.md): A flexible container for grouping related information. Use for dashboard summaries or items in a grid that require an overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-items/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-items/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-items/content.md)
- [Card for perimeter](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-perimeter.md): Component documentation for Card for perimeter — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-perimeter/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-perimeter/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/card/card-for-perimeter/content.md)
- [✍️ Collapse-accordion](https://volivarii.github.io/actian-ds-docs/components/data-display/collapse-accordion.md): Use to hide/show secondary information to reduce vertical clutter. Best for FAQs or detailed settings sections.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/collapse-accordion/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/collapse-accordion/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/collapse-accordion/content.md)
- [Digram, Item types](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-item-types.md): Works like tags but contains only 2 letters (initials of category name)
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-item-types/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-item-types/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-item-types/content.md)
- [Digram, Topic](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-topic.md): Component documentation for Digram, Topic — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-topic/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-topic/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/digram/digram-topic/content.md)
- [Glossary item hierarchy diagram](https://volivarii.github.io/actian-ds-docs/components/data-display/glossary-item-hierarchy-diagram.md): Component documentation for Glossary item hierarchy diagram — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/glossary-item-hierarchy-diagram/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/glossary-item-hierarchy-diagram/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/glossary-item-hierarchy-diagram/content.md)
- [Lineage connecting line](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-connecting-line.md): Component documentation for Lineage connecting line — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-connecting-line/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-connecting-line/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-connecting-line/content.md)
- [Lineage grouped node](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-grouped-node.md): Component documentation for Lineage grouped node — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-grouped-node/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-grouped-node/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-grouped-node/content.md)
- [Lineage individual node](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-individual-node.md): Component documentation for Lineage individual node — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-individual-node/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-individual-node/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/lineage/lineage-individual-node/content.md)
- [Metamodel widget](https://volivarii.github.io/actian-ds-docs/components/data-display/metamodel-widget.md): Component documentation for Metamodel widget — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/metamodel-widget/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/metamodel-widget/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/metamodel-widget/content.md)
- [Page header](https://volivarii.github.io/actian-ds-docs/components/data-display/page-header.md): The title area of a specific page. Should include the Page Title, optional Breadcrumbs, and page-specific primary actions.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/page-header/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/page-header/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/page-header/content.md)
- [Progress bar small](https://volivarii.github.io/actian-ds-docs/components/data-display/progress-bar-small.md): Visualizes the completion percentage of a task.  Use as a static visualization like a bar graph to show the completeness.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/progress-bar-small/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/progress-bar-small/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/progress-bar-small/content.md)
- [Scroll bar](https://volivarii.github.io/actian-ds-docs/components/data-display/scroll-bar.md): Custom UI for indicating and controlling scroll position within a specific container. Only use when standard browser scroll is insufficient.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/scroll-bar/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/scroll-bar/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/scroll-bar/content.md)
- [Search result card](https://volivarii.github.io/actian-ds-docs/components/data-display/search-result-card.md): A specialized card variant optimized for scannability during a search. Highlights relevant metadata and matching keywords.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/search-result-card/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/search-result-card/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/search-result-card/content.md)
- [Segmented control](https://volivarii.github.io/actian-ds-docs/components/data-display/segmented-control.md): Use for mutually exclusive options that impact the immediate view. Best for 2–4 options (e.g., "Week / Month / Year").
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/segmented-control/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/segmented-control/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/segmented-control/content.md)
- [✍️ Table](https://volivarii.github.io/actian-ds-docs/components/data-display/table.md): Use for large datasets requiring comparison, sorting, and filtering. Supports complex rows with multi-type data (text, badges, actions).

"If data is null, display the 'Empty State' illustration variant with a 'Create New' call to action."
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/table/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/table/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/table/content.md)
- [Identification key](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/identification-key.md): Use for identification keys. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/identification-key/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/identification-key/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/identification-key/content.md)
- [✍️ Tag, Catalog](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog.md): Use for catalog types. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog/content.md)
- [✍️ Tag, Catalog item type](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog-item-type.md): Use for physical metamodel item types. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog-item-type/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog-item-type/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-catalog-item-type/content.md)
- [✍️ Tag, Default](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-default.md): Use for categorizing or labeling items (e.g., "Design", "In Progress"). Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-default/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-default/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-default/content.md)
- [✍️ Tag, Glossary item type](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-glossary-item-type.md): Use for glossary item types. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-glossary-item-type/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-glossary-item-type/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-glossary-item-type/content.md)
- [✍️ Tag, Interactive](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-interactive.md): Component documentation for ✍️ Tag, Interactive — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-interactive/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-interactive/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-interactive/content.md)
- [✍️ Tag, Shared](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-shared.md): Use for indicating something is recently updated. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-shared/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-shared/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-shared/content.md)
- [✍️ Tag, Stage](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-stage.md): Use for data lifecycle stages. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-stage/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-stage/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-stage/content.md)
- [✍️ Tag, Status](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-status.md): Use for status. Can be interactive (removable) or static metadata.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-status/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-status/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/tag-identification-key/tag-status/content.md)
- [Toolbar](https://volivarii.github.io/actian-ds-docs/components/data-display/toolbar.md): Component documentation for Toolbar — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/toolbar/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/toolbar/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/toolbar/content.md)
- [⛔️ Bar graph](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/bar-graph.md): Component documentation for ⛔️ Bar graph — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/bar-graph/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/bar-graph/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/bar-graph/content.md)
- [⛔️ Line graph](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/line-graph.md): Component documentation for ⛔️ Line graph — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/line-graph/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/line-graph/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/data-display/wip-data-visuzlization/line-graph/content.md)
- [✍️ Alert-banner](https://volivarii.github.io/actian-ds-docs/components/feedback/alert-banner.md): Static, high-visibility message placed at the top of a page or section. Use for persistent system-level information (Success, Info, Warning, Error) that doesn't disappear automatically.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/alert-banner/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/alert-banner/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/alert-banner/content.md)
- [Confirmation](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/confirmation.md): A placeholder shown when success. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/confirmation/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/confirmation/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/confirmation/content.md)
- [Empty state](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/empty-state.md): A placeholder shown when a container has no content (e.g., empty search, no messages). Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/empty-state/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/empty-state/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/empty-state/content.md)
- [Error state](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/error-state.md): A placeholder shown when a container has an error. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/error-state/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/error-state/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/error-state/content.md)
- [Maintenance state](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/maintenance-state.md): A placeholder shown when maintenance. Must include an illustration, a clear title, and a "Call to Action" button to help the user get started.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/maintenance-state/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/maintenance-state/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/empty-state/maintenance-state/content.md)
- [Loader](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader.md): Indicates a background process is active. Use loader for large components or large section within a page
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader/content.md)
- [Loader with logo](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader-with-logo.md): Indicates a background process is active. Use loader with logo in transition between apps or logging in or out to reduce perceived wait time
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader-with-logo/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader-with-logo/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loader-with-logo/content.md)
- [Loading skeleton](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loading-skeleton.md): Indicates a background process is active. Use Skeleton for page-level transitions to reduce perceived wait time.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loading-skeleton/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loading-skeleton/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/loading-skeleton/content.md)
- [Spinner](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/spinner.md): Indicates a background process is active. Use Spinner for small, localized actions like button clicks.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/spinner/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/spinner/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/loading-loader-spinner-skeleton/spinner/content.md)
- [Notification](https://volivarii.github.io/actian-ds-docs/components/feedback/notification.md): Small, temporary overlay that appears at the edge of the screen. Use for non-critical confirmations (e.g., "Item saved"). Automatically dismisses after 3–5 seconds.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/feedback/notification/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/feedback/notification/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/feedback/notification/content.md)
- [Calendar](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/calendar.md): Component documentation for Calendar — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/calendar/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/calendar/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/calendar/content.md)
- [Input, date](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/input-date.md): Used for selecting a single date, a date range, or a specific point in time. Best for scheduling or historical data entry.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/input-date/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/input-date/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/calendar/input-date/content.md)
- [Checkbox with label](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/checkbox-with-label.md): Used for binary choices (on/off) or when a user can select multiple options from a list of related items.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/checkbox-with-label/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/checkbox-with-label/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/checkbox-with-label/content.md)
- [Dropdown, Select, default](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/dropdown-select-default.md): Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/dropdown-select-default/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/dropdown-select-default/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/dropdown-select-default/content.md)
- [Input](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/input.md): Used for single-line alphanumeric data entry (e.g., Name, Email, Phone). Specify the "type" attribute if applicable.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/input/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/input/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/input/content.md)
- [Radio button](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/radio-button.md): Used for mutually exclusive choices where the user must select exactly one option from a small list (2–5 items).
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/radio-button/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/radio-button/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/radio-button/content.md)
- [Rich text](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/rich-text.md): A multi-line input field that allows for text formatting (bold, links, lists). Use for long-form content like descriptions or comments.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/rich-text/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/rich-text/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/rich-text/content.md)
- [Search filters](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search-filters.md): A collection of inputs used to narrow down a dataset or search results. Should be placed above or to the left of the content it controls.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search-filters/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search-filters/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search-filters/content.md)
- [Search](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search.md): A specialized text input designed to query a database or filter a page's content in real-time.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search/content.md)
- [Search dropdown menu](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search-dropdown-menu.md): Component documentation for Search dropdown menu — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search-dropdown-menu/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search-dropdown-menu/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/search/search-dropdown-menu/content.md)
- [Toglge](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/toglge.md): Component documentation for Toglge — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/toglge/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/toglge/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/form-input-selection/toglge/content.md)
- [Breadcrumbs](https://volivarii.github.io/actian-ds-docs/components/navigation/breadcrumbs.md): Use to show the user's current location within a hierarchical multi-level structure. Enables 1-click navigation back to parent pages.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/breadcrumbs/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/breadcrumbs/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/breadcrumbs/content.md)
- [Account dropdown](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/account-dropdown.md): Component documentation for Account dropdown — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/account-dropdown/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/account-dropdown/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/account-dropdown/content.md)
- [App switcher dropdown](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/app-switcher-dropdown.md): Menu: -4 Density 
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

🛠 Additional options 
Menu list item - can be edited by selecting individual list item and  selecting wether it is enabled, selected, and has a divider from the variant properties.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/app-switcher-dropdown/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/app-switcher-dropdown/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/app-switcher-dropdown/content.md)
- [Global header](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/global-header.md): The persistent top-level container for branding, primary site-wide navigation, and user-specific actions (e.g., Profile, Logout).
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/global-header/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/global-header/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/global-header/content.md)
- [Notification dropdown](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/notification-dropdown.md): Component documentation for Notification dropdown — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/notification-dropdown/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/notification-dropdown/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/notification-dropdown/content.md)
- [Whats new dropdown](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/whats-new-dropdown.md): Component documentation for Whats new dropdown — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/whats-new-dropdown/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/whats-new-dropdown/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/global-header/whats-new-dropdown/content.md)
- [✍️ Side nav](https://volivarii.github.io/actian-ds-docs/components/navigation/side-nav.md): Vertical navigation for primary application modules. Use when the app has many top-level sections or needs to show sub-navigation.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/side-nav/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/side-nav/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/side-nav/content.md)
- [Stepper](https://volivarii.github.io/actian-ds-docs/components/navigation/stepper.md): Use to guide a user through a linear process with defined steps (e.g., Onboarding). Indicates current, completed, and upcoming steps.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/stepper/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/stepper/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/stepper/content.md)
- [Tabs](https://volivarii.github.io/actian-ds-docs/components/navigation/tabs.md): Use to switch between related views within the same context without navigating to a new page. Ideal for organizing content at the same level.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/navigation/tabs/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/navigation/tabs/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/navigation/tabs/content.md)
- [Chat with AI Steward](https://volivarii.github.io/actian-ds-docs/components/overlays/chat-with-ai-steward.md): Component documentation for Chat with AI Steward — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/overlays/chat-with-ai-steward/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/overlays/chat-with-ai-steward/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/overlays/chat-with-ai-steward/content.md)
- [Drawer, side panel](https://volivarii.github.io/actian-ds-docs/components/overlays/drawer-side-panel.md): A container that slides from right side of the screen. Use for secondary tasks that require high focus but need to maintain the context of the main page.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/overlays/drawer-side-panel/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/overlays/drawer-side-panel/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/overlays/drawer-side-panel/content.md)
- [Modal](https://volivarii.github.io/actian-ds-docs/components/overlays/modal.md): A centered dialog that blocks the main content. Use for critical "Stop and Think" actions, confirmations, or complex data entry that must be completed or cancelled before moving on.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/overlays/modal/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/overlays/modal/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/overlays/modal/content.md)
- [⛔️ Popover](https://volivarii.github.io/actian-ds-docs/components/overlays/popover.md): A non-modal floating container triggered by a click. Use for displaying a small menu or related content that doesn't fit in a tooltip. Stays open until a user clicks outside.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/overlays/popover/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/overlays/popover/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/overlays/popover/content.md)
- [⚠️ Tooltip](https://volivarii.github.io/actian-ds-docs/components/overlays/tooltip.md): Component documentation for ⚠️ Tooltip — Overview.
  - [accessibility](https://volivarii.github.io/actian-ds-docs/components/overlays/tooltip/accessibility.md)
  - [code](https://volivarii.github.io/actian-ds-docs/components/overlays/tooltip/code.md)
  - [content](https://volivarii.github.io/actian-ds-docs/components/overlays/tooltip/content.md)

## Other

- [Inventory (all 322 DS Kit)](https://volivarii.github.io/actian-ds-docs/inventory.md)
- [Ecosystem state](https://volivarii.github.io/actian-ds-docs/state.md)
- [Migrations](https://volivarii.github.io/actian-ds-docs/migrations.md)
- [About — ecosystem overview](https://volivarii.github.io/actian-ds-docs/about.md)