# Button
Action button with visual variants, compact sizes, and loading support.

## Import/Installation

<Tabs items={[{ label: 'Package', value: 'package' }, { label: 'Registry', value: 'registry' }]}>
  <TabsContent value="package">
    ```tsx
    import { Button } from "@lottiefiles/creator-plugins-ui";
    ```
  </TabsContent>

  <TabsContent value="registry">
    ```bash
    npx shadcn@latest add @lottiefiles/button
    ```
  </TabsContent>
</Tabs>

## Preview

<iframe src="https://creator-plugins-ds.lottiefiles.com/?story=button--all-examples&mode=preview" style={{ width: "100%", border: "1px solid rgba(128, 128, 128, 0.4)", borderRadius: "8px" }} height="1016" title="Button component live preview" frameBorder="no" loading="lazy" />

## Usage

```tsx
import { useState } from "react";

const [loading, setLoading] = useState(false);

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Delete</Button>
<Button
  loading={loading}
  onClick={() => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1200);
  }}
>
  Save
</Button>
```

## Props

<PropsTable
  props={[
  {
    name: "variant",
    type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "link-muted"',
    default: '"default"',
    description: "The visual style of the button.",
  },
  {
    name: "size",
    type: '"sm" | "default" | "icon"',
    default: '"default"',
    description: "The size of the button.",
  },
  {
    name: "render",
    type: "React.ReactElement",
    description: "Render the button as a different element (e.g. an anchor tag).",
  },
  {
    name: "loading",
    type: "boolean",
    default: "false",
    description: "If true, the button shows a spinner and is disabled.",
  },
]}
/>

Built on [Base UI Button](https://base-ui.com/react/components/button). See their docs for primitive-level details.