a2ui-shadcn logoa2ui-shadcn
DocsPlayground

Resources

  • Documentation
  • Playground
  • A2UI Protocol

Community

  • GitHub
  • Issues
  • shadcn/ui

More

  • Tailwind CSS
  • Next.js
  • React

a2ui-shadcn.shahnazar.me

Created by Reza Shahnazar

Getting Started

  • Introduction
  • Installation
  • Usage

Components

  • Components
    Layout
    ColumnRowCard
    Content
    Text
    Input
    TextFieldCheckBox
    Interactive
    Button
    Feedback
    Badge

Reactivity & Actions

  • Actions
  • Transport

Styling

  • Theming
  • RTL Support

Advanced

  • Custom Components
  • API Reference
  1. Home
  2. /Docs
  3. /Components
  4. /Badge
Feedback

Badge

A small label component for displaying status, categories, or tags. Perfect for highlighting information or categorizing content.

Properties

NameTypeRequiredDescription
idstringYesUnique identifier for the component
textstringYesBadge text content
variant'default' | 'secondary' | 'outline' | 'destructive'NoVisual style(default: default)

Examples

Badge Variants

Different badge styles

Preview
json

Status Badges

Using badges to show status

Preview
json
Back to Components