Skip to content
Tattva

Callout

Stable

A message box inside the page, with a color for its mood, an optional title and an optional button.

Also known as alert, banner, notice, inline message

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

Informational

Draft saved

Your changes are saved and will sync when you are back online.

The default mood. Use it for neutral notes that ask nothing of the reader.

UsageCodeDesignAccessibility

When to use it

A notice that sits inside the page instead of popping up over it. The soft color sets the mood, while the icon and the words carry the meaning.

Made of: Icon · Title · Text · Button

Use it for

  • A note about the page or the app, such as a saved draft or an unstable connection.
  • A warning someone should read before going on.
  • A short message with one button that fixes or follows up on it.

Not for

Do and avoid

Your trip is saved

You can change the dates until Friday.
Do. A short title and one line say what happened and what to do.

Notice

Something may have happened with some of your things.
Avoid. A vague message with a warning color worries people for no reason.

Do

  • Give every callout a title or a clear first sentence, so color is not the only clue.
  • Add one button for the next step the reader can take, like Retry or Upgrade.
  • Use danger only for things that failed. Use info for limits and neutral notes.
  • Keep the text to one or two sentences.

Avoid

  • Do not stack several callouts. Combine them or show the most important one.
  • Do not use warning as decoration. It is amber, which tells people to take a look.
  • Do not put long forms or lists inside. Link to a fuller page instead.
  • Do not use neutral or accent colors. Only the four moods work here.

On a phone

  • Fills the width of its container, and the message wraps beside the icon.
  • On a phone the action drops to its own line under the message, so the message keeps its full width.
  • The action button keeps its size and has a 44px tap area on touch screens.

Build your next AI screen with Tattva.

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

Get started