> ## Documentation Index
> Fetch the complete documentation index at: https://mds.stepanu.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Button
> High-performance, accessible React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.
# Button components
High-performance, accessible React button components built for modern applications and websites. These buttons are built using React Aria and styled with Tailwind CSS.
## Example
## Installation
You can add this button component using our CLI or manually:
```bash CLI theme={null}
npx mavka@latest add button
```
```bash Manual theme={null}
# Manual installation steps
```
## Variations
Below are the different styles and states available for the Button component:
### Primary
### Secondary
### Tertiary
### Link gray
### Link color
We've designed our button components to be "hybrid," meaning they can function as either a link or a standard button with ease. This offers several benefits, for example, there are many situations where you might want a link that behaves like a button, or a button that acts as a link. These two essential components work interchangeably, so it was important for us to make them easy to use.
You can turn the button component into an anchor by simply passing the `href` prop. When the `href` prop is present, the button component uses the Link component from React Aria under the hood instead of Button. This means you can pass any props or attributes that an anchor tag would accept when `href` is provided.
### Destructive primary
Our button component provides destructive variants that maintain the same interaction patterns as their non-destructive counterparts while applying appropriate warning colors and styling. You can use these variants just like regular buttons, and they support all the same features.
### Destructive secondary
### Destructive tertiary
### Destructive link
### Close X
## FAQs
Please refer to our frequently asked questions page for more.
Buttons support multiple color variants including `primary`, `secondary`, `tertiary`, `primary-destructive`, `secondary-destructive`, `tertiary-destructive`, `link-gray`, `link-color`, and `link-destructive`. The default color is `primary`.
Buttons support four sizes: `sm` (small), `md` (medium), `lg` (large), and `xl` (extra large). You can set the size using the `size` prop, with `sm` being the default size.
Yes, you can add icons using the `iconLeading` or `iconTrailing` props. These props accept either React components or React elements. Icons are automatically sized and styled to match the button size.
You can disable a button by setting the `isDisabled` prop to `true`. This will apply disabled styling, prevent user interaction, and disable any associated links or actions.
Yes, you can use buttons for navigation by providing an `href` prop. When an `href` is provided, the button renders as an anchor tag while maintaining button styling.
You can handle loading states using the `isLoading` prop. When set to `true`, the button displays a loading spinner and becomes non-interactive. Use `showTextWhileLoading` to keep the button text visible during loading.
You can make a button take the full width by adding the `w-full` Tailwind class to the `className` prop. The button component accepts standard HTML attributes and Tailwind classes.