Button Component

The Button component is a versatile UI element that supports primary, secondary-warm, and secondary-neutral variants with customizable disabled states and button types (button, submit, or reset).

Primary

The primary button is the main call to action in your application. It is typically used for actions that are most important to the user, such as submitting a form or saving changes.

import { Button } from "astrobits";

<Button type="primary" onClick={() => alert("Primary button clicked!")}>
  Primary Button
</Button>;

Secondary Warm

The secondary warm button is used for less critical actions. It is often used for secondary actions that complement the primary action.

import { Button } from "astrobits";

<Button
  variant="secondary-warm"
  onClick={() => alert("Secondary warm button clicked!")}
>
  Secondary Warm Button
</Button>;

Secondary Neutral

The secondary neutral button is used for actions that are not as important as the primary action. It is often used for actions that are less frequently used or for actions that are not critical to the user’s workflow.

import { Button } from "astrobits";
<Button
  variant="secondary-neutral"
  onClick={() => alert("Secondary neutral button clicked!")}
>
  Secondary Neutral Button
</Button>;

Disabled State

The disabled state of a button indicates that the button is not currently available for interaction. This is typically used to prevent users from clicking a button when an action cannot be performed.

import { Button } from "astrobits";

<Button variant="primary" disabled>
  Disabled Button
</Button>;