Applying Collections of Variables

🧩 Semantic vs. Status Components

In the Universal Design System, components are categorized into two broader collections of variables Semantic and Status types to reflect their behavior, interactivity, and role in the user experience.

---

📘 Semantic Components

Semantic components are non-interactive UI elements. They do not respond to user input, state changes, or dynamic behavior.

✅ Use semantic components when:

• The content is informational only

• The component has no hover/focus/active states

• You are designing layouts, cards, containers, labels, or UI text

🧠 Examples:

• Static Text blocks

• Layout Containers

• Non-clickable Tags or Badges

• Decorative Avatars or Icons

🔗 Use with:

• semantic/ tokens (e.g., surface/default, content/inverse)

• text/ styles and accessibility tags

⚠️ Semantic components should never use tokens from the status/ collection, as they are not interactive.

---

🎯 Status Components

Status components are interactive or stateful. They reflect behavior like selection, activation, toggles, or priority (e.g., primary CTA).

These components support multiple appearance states (default, hover, focus, active, disabled, visited) and are styled using dynamic status tokens.

✅ Use status components when:

• The component is clickable, selectable, or focusable

• The UI element changes based on interaction

• It represents a call-to-action, input, or toggleable behavior

🧠 Examples:

• Buttons (status/priority)

• Checkboxes, toggles, switches (status/toggle)

• Interactive Pills or Tabs

• Select Menus

🔗 Use with:

• status/priority/ or status/toggle/ tokens

• State-aware variants (hover, focus, etc.)

• Accessibility roles (e.g., button, checkbox, link)

💡 Status components follow strict accessibility rules and token logic to ensure WCAG compliance and predictable behavior across modes.

---

🔄 Quick Summary

	Static Components	Status Components
Behavior	Non-interactive	Interactive / Stateful
Use Case	Layout, info, decoration	CTA, form elements, toggles
Tokens Used	semantic/, text/	status/priority, status/toggle
Accessibility	Informative, semantic tags	Focus, keyboard, ARIA required
Example	Avatar, Card, Label	Button, Checkbox, Tab

---

🛠 Best Practices

• Don’t style static elements using interactive tokens.

• Don’t use status components just for looks — they’re built for interaction.

• Make sure to test status variants for contrast and accessibility across light and dark modes.

---

🧠 Tip: Ask yourself — “Can this be clicked or toggled?” If yes ➝ Use status. If no ➝ Use static.