Skip to content
Tattva

ApprovedByMark

Experimental

A small mark that says who said yes to an action.

Also known as approved by, sign off mark

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

The four kinds

You approvedAutomatic check approvedAllowed by a saved ruleNobody asked (auto mode)

Each kind has its own icon and words. 'Nobody asked' is shown plainly so auto mode is never hidden.

UsageCodeDesignAccessibility

When to use it

Says who allowed an action: the person, an automatic check, a saved rule, or nobody. It always pairs an icon with words, so people can tell their own approval from a machine's without relying on color.

Made of: Icon · Words · Extra detail (optional, in the tooltip)

Use it for

  • Beside each action in a log or history.
  • On a finished step, to show whether a person or a rule let it run.
  • Making auto mode visible with the words "Nobody asked".

Not for

  • A full record of actions with status and Undo: use ActionLog.
  • Showing that content was written by AI: use AIBadge.
  • A general status or category label: use Badge.

Do and avoid

You approvedAutomatic check approvedAllowed by a saved rule. Refunds under $20
Do. An icon and words say who said yes to each action.
Avoid. Colored dots alone cannot tell your yes from a machine's.

Do

  • Show it on every action that needed or skipped an approval.
  • Keep the words visible next to the icon.
  • Say 'Nobody asked' when auto mode skipped the question.
  • Add detail naming the saved rule when you can.

Avoid

  • Don't use color alone to tell the kinds apart.
  • Don't show 'You approved' for something an automatic check approved.
  • Don't hide the mark to save space. Let it wrap instead.
  • Don't use amber for it. It is a record, not a request.

On a phone

  • It is one short line of small text that wraps inside its container instead of cutting off.
  • The detail text shows as a tooltip on hover only, so on a phone it is read aloud by screen readers but never shown.
  • Keep the label words short, because the mark has no tap action.

Seen in products

  • Claude Code auto mode: a separate model reviews each action and blocks risky ones, so a classifier can stand in for a person's approval.
  • Claude Code approvals can be remembered as saved rules, so some actions run with no new question.
  • Claude Code never auto-approves some actions in any mode, so a person must still say yes to those.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started