`Button` is a versatile, accessible button component supporting multiple visual styles, states, and behaviors.

Features:

- Multiple visual variants for different semantic actions (primary, secondary, destructive, etc.) - Size options for different UI contexts - Loading state with spinner for async actions - Active, focused, and disabled states - Can render as other elements via `asChild` (e.g., <a>, <div>) - Optional tooltip support for additional context - Supports icons and custom content - Full accessibility support (keyboard, ARIA, focus management)

Usage:

- Use for primary and secondary actions, destructive actions, or as links styled as buttons - Combine with icons for richer UI - Use tooltips for extra guidance or clarification

Best Practices:

- Use the appropriate variant for the action's importance and meaning - Keep button labels concise and action-oriented - Avoid using too many button styles on one screen - Ensure sufficient color contrast and accessible focus indicators

Accessibility:

- All states are accessible to screen readers and keyboard users - Tooltips are accessible and do not interfere with button focus - Use semantic HTML (button, a) for best accessibility Basic: Shows the default button usage. - Demonstrates a simple button with default styling. - Use for primary actions or as a starting point for customization.

Sizes: Demonstrates the different size options for the Button component.

- Shows default and large button sizes. - Useful for adapting buttons to different UI layouts or prominence.

Disabled: Demonstrates the disabled state of the Button component.

- Shows how to use the disabled prop to disable the button.

Loading: Demonstrates the loading state of the Button component.

- Shows how to use the loading prop to show a loading spinner.

Active: Demonstrates the active state of the Button component.

- Shows how to use the active prop to show a active state.

Focused: Demonstrates the focused state of the Button component.

- Shows how to use the focused prop to show a focused state.

With Icons: Demonstrates the Button with an icon.

- Shows how to use the icon prop to show an icon.

Variants: Demonstrates all visual variants, sizes, and states for the Button component.

- Shows how to use the variant, size, and state props. - Includes interactive controls for switching variants and sizes. - Demonstrates active, focused, loading, and disabled states. - Shows usage with and without icons. - Useful for previewing all button styles and states in your design system.

AsChild: Demonstrates rendering the Button as another element using the `asChild` prop.

- Useful for rendering a button as a link or other custom element while retaining button styles and behaviors.

As: Demonstrates rendering the Button as another element using the `as` prop.

- Useful for rendering a button as a link or other custom element while retaining button styles and behaviors.