# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2FaIXLHY9URbD942Yp2ENh%2Fbutton.png?alt=media&#x26;token=32ee8939-2c4b-4201-a417-c26486387b2b" 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="icon">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)