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-badge> v1.1.0 Markdown for agents

Badge

A small non-interactive label for a status, count, or category, such as Live, Beta, or 3 new.

Intents status labeling metadata

Variants

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

variant

Visual style variant

Default
variant="default"
Secondary
variant="secondary"
Outline
variant="outline"
Success
variant="success"
Warning
variant="warning"
Destructive
variant="destructive"

Examples

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

Default

New 
<aihio-badge>New</aihio-badge>

Secondary

Draft 
<aihio-badge variant="secondary">Draft</aihio-badge>

Outline

v2.0 
<aihio-badge variant="outline">v2.0</aihio-badge>

Destructive

Error 
<aihio-badge variant="destructive">Error</aihio-badge>

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.

Badges are non-interactive labels.

Put interactive elements outside the badge.

Don't

<aihio-badge><aihio-button>Delete</aihio-button></aihio-badge>

aihio lint reports

  • invalid-child error child <aihio-button> is not allowed here. Expected: #text.
  • forbidden-descendant error descendant <aihio-button> is forbidden inside <aihio-badge>.

Do

Draft Delete 
<aihio-cluster gap="tight">
  <aihio-badge>Draft</aihio-badge>
  <aihio-button variant="ghost" size="sm">Delete</aihio-button>
</aihio-cluster>

variant="primary" is not valid.

Use variant="default" for the primary style.

Don't

<aihio-badge variant="primary">New</aihio-badge>

aihio lint reports

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

Do

New 
<aihio-badge variant="default">New</aihio-badge>

API

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

Attributes

variant
one of defaultsecondaryoutlinesuccesswarningdestructive default default
Visual style variant

Slots

default
Badge text content

Composition

Allowed children
text
Forbidden descendants
aihio-button aihio-input 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 badge conveys information not present elsewhere (e.g. unread count)

    Include the meaning in visible text or an aria-label on the surrounding context. Badges have no inherent role.

    Not machine-checkable: a judgment for the author.

Handled for you

  • Badge stays semantically neutral: it does not add button, alert, status, or live-region roles automatically.

In patterns

Canonical compositions that use aihio-badge.