Alert

A message the person should notice, announced when it appears. Use it for what happened or what to fix, not for decoration.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Alert-0.tess

<template>
  <div>
    <Alert>
      <span slot="title">Heads up</span>
      Your trial ends in three days.
    </Alert>
    <Alert tone="danger">
      <span slot="title">Could not save</span>
      The connection was lost. Try again.
    </Alert>
  </div>
</template>

Installation

CLIManual

npmpnpmyarnbun

npx @pixelscriptio/tessera add Alert

pnpm exec tessera add Alert

yarn tessera add Alert

bunx @pixelscriptio/tessera add Alert

Also installs Icon, which it uses.
Works with Tessera 0.9.0 or newer.

Copy and paste the code into your project

Put it in system/components. Add Icon the same way.

system/components/Alert.tess

<contract>
{
  "name": "Alert",
  "role": "alert",
  "description": "A message the person should notice, announced when it appears. Use it for what happened or what to fix, not for decoration.",
  "since": "0.8.0",
  "parts": ["root", "icon", "content", "title", "body"],
  "variants": {
    "tone": ["neutral", "primary", "danger"] // first value is the default
  },
  "slots": {
    "icon": "optional leading icon",
    "title": "a short heading",
    "default": "the message"
  },
  "preview": {
    "slots": {
      "icon": {
        "component": "Icon",
        "props": {
          "name": "info"
        }
      },
      "title": "Heads up",
      "default": "Your trial ends in three days."
    }
  }
}
</contract>

<template>
  <div class="root" role="alert">
    <span class="icon"><slot name="icon" /></span>
    <div class="content">
      <div class="title"><slot name="title" /></div>
      <div class="body"><slot /></div>
    </div>
  </div>
</template>

<style>
.root {
  display: flex;
  gap: $space.3;
  padding: $space.3 $space.4;
  border: 1px solid $color.border.default;
  border-radius: $radius.md;
  background: $color.surface.raised;
  color: $color.text.default;
  font-size: $font.size.sm;

  &[data-tone='primary'] {
    border-color: $color.action.primary.text;
  }

  &[data-tone='danger'] {
    border-color: $color.action.danger.text;
  }
}

.icon {
  display: inline-flex;
  flex: none;
}

.icon:empty {
  display: none;
}

.title {
  font-weight: $font.weight.bold;
}

.title:empty {
  display: none;
}

.body {
  color: $color.text.muted;
}

.root[data-tone='danger'] .title {
  color: $color.action.danger.text;
}
</style>

Check your design tokens
Your design system needs these. tessera add reports the ones that are missing; by hand, run npx @pixelscriptio/tessera check.
color.action.danger.text color.action.primary.text color.border.default color.surface.raised color.text.default color.text.muted font.size.sm font.weight.bold radius.md space.3 space.4

Usage

Using Alert

A message the person should notice. It is announced when it appears.

Say what happened and what to do about it. A title is a short heading; the default slot is the message.
tone="danger" is for something that went wrong, primary for something worth noticing, and neutral for plain information.
Add an icon to help people who do not read the color. The icon is decoration: the text carries the meaning, and the tone is never the only signal.
It is not dismissible by itself. To let the person close it, put a Button inside and remove the alert when it is pressed.
Because it is announced at once, do not show one for something that changed a moment ago. Use it for what needs attention.

PreviewCode

The preview needs JavaScript. The code is in the Code tab.

Alert-0.tess

<template>
  <div>
    <Alert>
      <span slot="title">Heads up</span>
      Your trial ends in three days.
    </Alert>
    <Alert tone="danger">
      <span slot="title">Could not save</span>
      The connection was lost. Try again.
    </Alert>
  </div>
</template>

API reference

Variants

Variant	Values
`tone`	`neutral` default `primary` `danger`

Slots

Slot	Content
`icon`	optional leading icon
`title`	a short heading
`default`	the message

Anatomy


Role	`alert`
Parts	`root` `icon` `content` `title` `body`
Since	0.8.0

Design tokens it uses

Your design system needs these. tessera add checks that it has them, and can add the ones it lacks.

color.action.danger.text color.action.primary.text color.border.default color.surface.raised color.text.default color.text.muted font.size.sm font.weight.bold radius.md space.3 space.4

Checksum

6539e35e90e4d90207c3c7bff322df3571fb4e1777f3f303997088eb4de0f7ff