Skip to content
Aihio v2.3.0
Search
GitHub
Search Describe what you are building, or name a component, intent, or token. Components and patterns are ranked the way the MCP server's find tool ranks them for an agent.

<aihio-alert> v1.1.0 Markdown for agents

Alert

A callout for a message the user should notice where it is shown: a failed save, a confirmation that something worked, a warning about a setting. Only the destructive variant interrupts a screen reader.

Intents alert informational status

Variants

Every value of the attributes that change how it looks. The values come from the schema.

variant

Visual and live-region emphasis. destructive announces assertively; success, warning, and default announce politely.

Heads up
Your workspace has a new member.
variant="default"
Saved
Your changes are live.
variant="success"
Trial ends soon
Add a payment method to keep your workspace.
variant="warning"
Could not save
Check your connection and try again.
variant="destructive"

Examples

Each one rendered live, over the markup that produces it.

Default

Neutral information, announced politely as role="status".

Heads up!
You can add components to your app.
 
<aihio-alert>
  <div slot="title">Heads up!</div>
  <div slot="description">You can add components to your app.</div>
</aihio-alert>

Destructive

A failure: the one variant announced assertively, as role="alert".

Error
Something went wrong.
 
<aihio-alert variant="destructive">
  <div slot="title">Error</div>
  <div slot="description">Something went wrong.</div>
</aihio-alert>

Success

A confirmation that something worked.

Changes saved
Your profile is up to date.
 
<aihio-alert variant="success">
  <div slot="title">Changes saved</div>
  <div slot="description">Your profile is up to date.</div>
</aihio-alert>

Warning

Something that needs attention but has not failed.

Trial ends in 3 days
Add a payment method to keep your workspace active.
 
<aihio-alert variant="warning">
  <div slot="title">Trial ends in 3 days</div>
  <div slot="description">Add a payment method to keep your workspace active.</div>
</aihio-alert>

Mistakes

Each one beside its fix, with what aihio lint says about it. The prompt fragment gives agents the same pairs, and the build fails if the linter stops catching one or a fix stops passing.

variant="error" is not valid.

Use variant="destructive" for error states.

Don't

<aihio-alert variant="error">Oops</aihio-alert>

aihio lint reports

  • invalid-enum-attribute error invalid variant="error". Use variant="destructive". Expected one of: default, success, warning, destructive. Suggests variant="destructive"

Do

Could not save
 
<aihio-alert variant="destructive">
  <div slot="title">Could not save</div>
</aihio-alert>

Alerts are non-interactive surfaces.

For acknowledgeable prompts use aihio-dialog.

Don't

<aihio-alert><aihio-button>OK</aihio-button></aihio-alert>

aihio lint reports

  • forbidden-descendant error descendant <aihio-button> is forbidden inside <aihio-alert>.

Do

Your changes were saved
 
<aihio-alert>
  <div slot="title">Your changes were saved</div>
</aihio-alert>

role="alert" interrupts the screen reader.

A confirmation should announce politely — drop the role and let the success variant set role="status".

Don't

<aihio-alert variant="success" role="alert">Saved</aihio-alert>

aihio lint reports

  • alert-role error Remove the role and let the variant set it: role="alert" for destructive, which interrupts the screen reader, and role="status" for the rest, which waits its turn.

Do

Saved 
<aihio-alert variant="success">Saved</aihio-alert>

API

Every attribute, property, method, and event the schema declares for aihio-alert.

Attributes

variant
one of defaultsuccesswarningdestructive default default
Visual and live-region emphasis. destructive announces assertively; success, warning, and default announce politely.

Slots

default
Alert content
title
Alert title (use slot="title")
description
Alert description (use slot="description")

Composition

Allowed slots
default title description
Forbidden descendants
aihio-button aihio-toggle aihio-switch aihio-input aihio-combobox aihio-dropdown aihio-dialog

Accessibility

What you have to provide, and what the component already does. The obligations with a rule are checked by aihio lint and by the dev build's console warnings.

Your obligations

  • warn When variant="destructive"

    Include slot="title" or slot="description" so assistive tech has content to announce. Colour alone is not a sufficient signal.

    Checked as alert-announced-content

  • error When role is set on the alert to anything but its variant's own (alert for destructive, status otherwise)

    Remove the role and let the variant set it: role="alert" for destructive, which interrupts the screen reader, and role="status" for the rest, which waits its turn.

    Checked as alert-role

Handled for you

  • role="alert" (assertive) is set for variant="destructive"; other variants get role="status" (polite) so a confirmation does not interrupt the screen reader
  • An author-provided role is always left alone

In patterns

Canonical compositions that use aihio-alert.