Zetta v1.6

Components · Data display & feedback

Section message

An inline panel that explains the state of the section it sits in — a tip, a success, a problem that needs attention. Unlike a toast it persists, and unlike a banner it lives in the content flow with a title, body, and optional actions.

Preview

Trial ending soon
Your trial ends in 5 days. Upgrade to keep your projects running.
Deployed
Your changes are live in production.

Build with the skill

No package to install — hand this to your AI to generate or migrate the component in your stack.

Prompt for your AI 
Apply the Zetta "Section message" component to this project using the zetta-design-md skill.

WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `section-message` spec (variants: info, success, warning, danger) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `section-message` spec in this project's stack.

AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.

ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.

Anatomy & rules

╭────────────────────────────────────────────╮
│ ℹ  Title (optional)                        │
│    Body text describing the situation.     │
│    [Action link]                           │
╰────────────────────────────────────────────╯
State Visual
Default Semantic fill, icon, title, body, optional action
Dismissed Not rendered (product removes from DOM)

When to use

  • Contextual information tied to a specific section, form, or panel.
  • Form-level validation errors (distinct from field-level errors).
  • Success confirmation after a major action within a section.

When not to use

  • System-wide announcements — use Banner.
  • Transient confirmations — use Toast.
  • Field-level errors — use field-error from Field.

Do

  • Keep body text to 1–3 sentences.
  • Include an action only when there is a clear, direct resolution.

Don't

  • Don't use danger for warnings — choose the correct semantic variant.
  • Don't stack multiple section messages — consolidate into one.
  • Title: optional. Use when the body text needs a heading for scannability.
  • Body: factual, concise. What happened and what (if anything) the user should do.
  • Actions: 1–2 max. Verb phrases: "Retry", "View details", "Contact support".

Keyboard

Key Behavior
Tab Move focus to action or dismiss button
Enter / Space Activate focused button

Accessibility

  • role="alert" for danger variant — announces immediately to screen readers.
  • role="status" for info and success — polite live region.
  • Warning: use role="alert" only when the user must act; otherwise role="status".
  • Icon is decorative — aria-hidden="true". Meaning is in the text.

Spec

Values and token references resolved straight from the Zetta spec.

section-message
display
flex
gap
{spacing.md}
padding
{spacing.md}
borderRadius
{rounded.base}
borderWidth
1px
borderStyle
solid
section-message-info
backgroundColor
{colors.info-bg}
borderColor
{colors.info}
iconColor
{colors.info}
textColor
{colors.body}
section-message-success
backgroundColor
{colors.success-bg}
borderColor
{colors.success}
iconColor
{colors.success}
textColor
{colors.body}
section-message-warning
backgroundColor
{colors.warning-bg}
borderColor
{colors.warning}
iconColor
{colors.warning}
textColor
{colors.body}
section-message-danger
backgroundColor
{colors.danger-bg}
borderColor
{colors.danger}
iconColor
{colors.danger}
textColor
{colors.body}
section-message-icon
size
{icons.sizeMap.md}
flexShrink
0
marginTop
2px
section-message-content
display
flex
flexDirection
column
gap
{spacing.xs}
section-message-title
fontFamily
Geist
fontSize
14px
fontWeight
500
lineHeight
1.40
textColor
{colors.ink}
section-message-body
fontFamily
Geist
fontSize
14px
fontWeight
400
lineHeight
1.60
textColor
{colors.body}
section-message-actions
display
flex
gap
{spacing.sm}
marginTop
{spacing.xs}