> ## Documentation Index
> Fetch the complete documentation index at: https://elormui-mintlify-6ade9c4d.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

> Displays a button or a component that looks like a button.

export const ComponentPreview = ({component = "button", theme = "neutral", accent = "default", mode = "dark"}) => {
  const src = `${previewOrigin()}/preview/${component}?theme=${theme}&accent=${accent}&mode=${mode}`;
  return <Frame>
      <iframe src={src} title={`${component} preview`} style={{
    width: "100%",
    height: "280px",
    border: "none",
    borderRadius: "8px",
    background: "transparent"
  }} />
    </Frame>;
};

export const InstallCommand = ({command = "elorm add button"}) => {
  const managers = [{
    name: "npm",
    cmd: `npx ${command}`
  }, {
    name: "pnpm",
    cmd: `pnpm dlx ${command}`
  }, {
    name: "yarn",
    cmd: `yarn dlx ${command}`
  }, {
    name: "bun",
    cmd: `bunx ${command}`
  }];
  return <CodeGroup>
      {managers.map(({name, cmd}) => <pre key={name} data-language="bash" data-title={name}>
          <code>{cmd}</code>
        </pre>)}
    </CodeGroup>;
};

## Installation

<InstallCommand command="elorm add button" />

## Preview

<ComponentPreview component="button" />

## Usage

```tsx theme={null}
import { Button } from '@/components/ui/button'
```

Displays a button or a component that looks like a button.

## Examples

### Default

<Tabs>
  <Tab title="Preview">
    <ComponentPreview component="button" />
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    <Button>Click me</Button>
    ```
  </Tab>
</Tabs>

### Outline

<Tabs>
  <Tab title="Preview">
    <ComponentPreview component="button" />
  </Tab>

  <Tab title="Code">
    ```tsx theme={null}
    <Button variant="outline">Cancel</Button>
    ```
  </Tab>
</Tabs>

## Usage notes

Primary actions. Use variant=outline for secondary actions, variant=ghost for tertiary.

## Composition

DialogFooter, CardFooter

## Avoid

* Do not use raw bg-blue-500
* Do not nest buttons inside buttons