# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.usegravity.app/gravity-web/components/button.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.