Skip to content
Actian Actian Design System

✍️ Tag, Default

Updated 2026-05-14

Confidence anatomy low variants medium motion medium a11y high content high

Overview

Section titled “Overview”

Use for categorizing or labeling items (e.g., “Design”, “In Progress”). Can be interactive (removable) or static metadata.

Anatomy

  1. 1
    Container
    the bounding surface — frames the data presentation
  2. 2
    Title or heading (optional)
    identifies what the data represents
  3. 3
    Primary content
    the data itself — text, value, chart, table cells, badge label
  4. 4
    Supporting metadata (optional)
    timestamps, units, counts, attribution
  5. 5
    Visual indicator (optional)
    color dot, icon, badge, or status pill
  6. 6
    Action affordance (optional)
    expand, drill-in, dismiss, or copy

Variants

Color
Pink
Purple
Indigo
Yellow
Lime
Teal
Orange
Gray
Default

Motion

Skeleton Loading

Slug: skeleton-loading

rows/cards reveal with skeleton placeholders during load

Staggered Entrance — Lists, Table Rows, Search Cards

Slug: staggered-entrance

lists, tables, search-result-cards enter with staggered fades

Accordion (expand/collapse)

Slug: accordion-expand-collapse

collapsible cards/sections expand at the accordion pace

Resources

Section titled “Resources”