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. /Button
Interactive

Button

A clickable button component with multiple variants, sizes, and support for actions and loading states.

Properties

NameTypeRequiredDescription
idstringYesUnique identifier for the component
textstringYesButton label text
variant'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive'NoVisual style variant(default: primary)
size'sm' | 'md' | 'lg'NoButton size(default: md)
disabledboolean | { path: string }NoDisable the button
actionActionNoAction to trigger on click

Examples

Button Variants

Different button styles for various use cases

Preview
json

Interactive Button

Button with action that triggers an event

Preview
json
Back to Components