Button

A clickable trigger for actions, forms, and navigation.

Import#

import { Button } from "asheeui";

Usage#

import { Button } from "asheeui";

export default function Basic() {
	return (
		<div className="flex items-center gap-4">
			<Button>Button</Button>
		</div>
	);
}

Examples#

Color#

Variant#

Size#

Radius#

Disabled#

Loading state#

Icon-only#

Full width#

With animation#

Props#

* Falls back through Global Configuration if not set. See below.

Global Configuration#

Button reads defaults from four places, in this order of precedence:

1. Instance prop: set directly on <Button />
2. Component config: components.button in your ashee.config
3. Theme default: defaultVariant / defaultColor / defaultRadius in your ashee.config
4. Built-in fallback: component's internal default values

Component config#

// ashee.config.ts
import type { ExternalConfig } from "asheeui";

export const config: ExternalConfig = {
  components: {
    button: {
      variant: "solid",
      color: "primary",
      size: "md",
      radius: "md",
      animate: true,
      fullWidth: false,
    },
  },
};

Built-in fallbacks#

{
  size: "md",
  variant: "bordered",
  color: "primary",
  radius: "md",
  animate: true,
  fullWidth: false,
}

Accessibility#

• Renders a native <button> element with the appropriate type
• isLoading sets aria-busy and hides button text from assistive tech while the spinner is visible
• Icon-only buttons (icon) require an aria-label
• Disabled and loading states are exposed via aria-disabled
• Implements focus-visible ring for keyboard navigation

Notes#

• Icon-only buttons: When using icon, you must provide an aria-label for accessibility.
• Loading state: The button text is hidden from screen readers while isLoading is true. The spinner provides the visual feedback.
• Animation: The animate prop adds a subtle scale effect on click. It's enabled by default.
• Full width: When fullWidth is true, the button expands to fill its container width.