> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/button.md).

# Button

The Swiss Army knife of buttons, the `Button` component displays a button or a component that looks like a button. It supports various styles, sizes, and functionality such as icons, loading states, and navigation.

## Preview

<div align="left"><figure><img src="/files/ZoQcsoXyI0nMF5XW49pw" alt="Gravity button component" width="375"><figcaption></figcaption></figure></div>

## Usage

```javascript
import { Button } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <Button 
      text='Click Me' 
      color='blue' 
      action={ () => alert('You clicked me'); }
    />
  );
}
```

### Props

<table data-full-width="true"><thead><tr><th>Prop</th><th>Description</th><th>Required</th><th>Value</th></tr></thead><tbody><tr><td>action</td><td>callback function</td><td>required if no url prop </td><td>function</td></tr><tr><td>asChild</td><td>render as a slot</td><td>optional</td><td>boolean</td></tr><tr><td>childen</td><td>button label or child component</td><td>optional</td><td>string or component</td></tr><tr><td>className</td><td>custom styling</td><td>optional</td><td>SCSS or Tailwind</td></tr><tr><td>color</td><td>button color</td><td>optional</td><td>string (red/orange/blue/green) default: black</td></tr><tr><td>icon</td><td><a href="/pages/-M-63u_2RmtFuQof8VwI">Icon</a> name</td><td>optional</td><td>string</td></tr><tr><td>iconColor</td><td>icon outline color</td><td>optional</td><td>string (light/dark/green/blue/orange/red) or hex string</td></tr><tr><td>iconFill</td><td>icon fill color</td><td>optional</td><td>hex string</td></tr><tr><td>iconSize</td><td>icon size </td><td>optional</td><td>integer, default: 16</td></tr><tr><td>loading</td><td>toggle loading spinner</td><td>optional</td><td>boolean</td></tr><tr><td>params</td><td>object passed to the callback function</td><td>optional</td><td>object</td></tr><tr><td>size</td><td>Size of the button</td><td>optional</td><td>string (xs/sm/lg/icon/full)</td></tr><tr><td>text</td><td>button label</td><td>required</td><td>string</td></tr><tr><td>type</td><td>button type eg. submit</td><td>optional</td><td>string</td></tr><tr><td>url</td><td>navigate to an internal or external URL</td><td>optional</td><td>string</td></tr><tr><td>variant</td><td>button variant</td><td>optional</td><td>string (destructive/ghost/icon/link/naked/outline/rounded/secondary)</td></tr></tbody></table>

### Example

```javascript
import { Button } from 'components/lib';

function Example({ ...props }){
  return (
    <div>
      <Button 
        text='Primary Button'
        color='blue'
        action={() => alert('Primary Button clicked!')}
      />
      <Button 
        text='Secondary Button'
        variant='secondary'
        action={() => alert('Secondary Button clicked!')}
      />
      <Button 
        icon='search'
        size='icon'
        action={() => alert('Icon Button clicked!')}
      />
    </div>
  );
}
```

### Notes

* The `Button` component uses the `Icon` and `useNavigate` from `'components/lib'` and `Slot` from `@radix-ui/react-slot`.
* The `variant` prop determines the styling of the button.
* Custom styles can be applied using the `className` prop.
* The `color` prop sets the color of the button, defaulting to 'black'.
* The `action` prop is a callback function that gets called when the button is clicked.
* The `loading` prop toggles a loading animation on the button.
* The `url` prop navigates to a specified URL when provided.
* For more details, refer to the [Shadcn Button documentation.](https://ui.shadcn.com/docs/components/button)