Docs
Button

Button

The Button component is a core UI element that serves as the foundation for more advanced AI-enabled buttons in the Empire UI library.

Features

  • Accessible design with keyboard navigation
  • Versatile variants for different UI contexts
  • Responsive behavior on all device sizes
  • Customizable styling using Tailwind CSS
  • Typescript support with comprehensive types

Examples

Basic Button

Button Variants

Empire UI buttons come in multiple variants to match your UI needs.

Button Sizes

Disabled State

With Icon

asChild

Use the asChild prop to render the Button as a different element using Radix UI's Slot component.

Link Button

Installation

npx empire@latest add button

API Reference

Props

PropTypeDefaultDescription
variant'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link''default'Button style variant
size'default' | 'sm' | 'lg' | 'icon''default'Button size
asChildbooleanfalseTransform button into a child element

Plus all standard HTML button attributes.

Extending Button for AI Features

The Button component serves as the foundation for specialized AI-oriented buttons in Empire UI:

  • AIGrammarCheckButton - Proofreads and corrects text
  • AIParaphraserButton - Rewrites text with different phrasing
  • AISummarizerButton - Condenses text into summaries
  • AIImageCaptionButton - Generates captions for images
  • AITranslatorButton - Translates text between languages

These specialized AI buttons extend the base Button with AI functionality while maintaining the same styling and accessibility features.

Customization

You can customize the button styles by modifying the buttonVariants function in your button component:


const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)

Accessibility

The Button component follows WCAG 2.1 accessibility guidelines:

  • Has appropriate ARIA attributes
  • Supports keyboard navigation
  • Maintains sufficient color contrast
  • Provides visual feedback for different states