Button

<Button
  variant="default"
  size="default"
  disabled={false}
  className=""
  style={{ borderRadius: "4px", transition: "background-color 0.2s, color 0.2s" }}
>
  Click Me
</Button>

Installation

npx axionjs-ui add button

File Structure

Variants

Default

Secondary

Destructive

Outline

Ghost

Shine

Gooey Right

Gooey Left

Sizes

Props

Features

The Button component provides the following features:

• Dynamic Variants:
  • Supports multiple styles such as default, secondary, destructive, outline, ghost, and more.
• Custom Animations:
  • Includes unique hover effects like shine, gooeyRight, and expandIcon for enhanced interactivity.
• Multiple Sizes:
  • Available in small, default, large, and icon sizes to fit various use cases.
• Accessibility Built-In:
  • Fully supports ARIA attributes, focus states, and keyboard navigation.
• Customizable:
  • Highly extensible with custom class names and the asChild prop for wrapping elements.

Use Cases

The Button component is ideal for:

• Call-to-Actions:
  • Use prominent buttons like default or shine for primary actions such as signing up or submitting forms.
• Destructive Actions:
  • Highlight critical actions such as deletions with the destructive variant.
• Secondary Actions:
  • Pair primary buttons with subtle options like secondary for less prominent actions.
• Toolbars and Icon Buttons:
  • Use the icon size for compact buttons in toolbars or quick actions.
• Dynamic UIs:
  • Enhance user interfaces with interactive effects like ringHover or expandIcon.

Accessibility

The Button component is built with accessibility in mind:

• ARIA Roles:
  • Supports attributes like aria-label, aria-labelledby, and aria-expanded for screen readers.
• Keyboard Navigation:
  • Fully operable using Tab and Enter keys.
• Focus Management:
  • Includes focus-visible styles to indicate active states clearly.
• Disabled State:
  • Buttons marked as disabled prevent all interactions while remaining visually distinguishable.

Conclusion

The Button component is a highly flexible and accessible solution for modern interfaces. With its wide range of variants, sizes, and animations, it provides developers with the tools they need to build engaging, inclusive, and user-friendly applications. Its focus on performance and customizability makes it a cornerstone for UI design.