Appearance and tone

Descriptor-backed visual preset axes for Chirp UI components

8 items

Chirp UI components that opt into the preset pilot acceptappearanceand toneas macro parameters. These values are descriptor-backed component contracts, not utility classes.

{{ btn("Delete", appearance="outlined", tone="danger") }}
{{ badge("At risk", appearance="tonal", tone="warning") }}
{% call card(title="Review", appearance="outlined", tone="danger") %}...{% end %}
{% call surface(appearance="outlined", tone="primary") %}...{% end %}
{{ text_field("project", label="Project", appearance="outlined", tone="primary") }}

Pilot components

The current pilot covers:

  • btn
  • badge
  • alert
  • card
  • surface
  • field / text_field

Usedangerfor shared destructive or high-risk intent. Do not use tone="error"; existing variant="error"values remain component-local compatibility where they already shipped.

Canonical reference

The repository guide has the full vocabulary, migration map, validation behavior, and compatibility policy: docs/APPEARANCE-TONE.md.

The component showcase also includes a live/appearance-tonepage for copyable examples across the pilot components.