import SEO from '../components/SEO'

<SEO
  title="Button"
  description="The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation."
/>

# Button
<br />

The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

<br />

See `CButton`'s <a target="_blank" href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CButton/accesibility.md">accessibility report</a>

### Import

```js
import { CButton } from "chakra-ui/vue"
```

### Usage
```vue live=true
<c-button variant-color="green">Button</c-button>
```

### Button Sizes

Use the `size` prop to change the size of the `CButton`. You can set the value to `xs`, `sm`, `md` or `lg`.

```vue live=true
<c-button-group :spacing="4">
  <c-button variant-color="blue" size="xs">
    Button
  </c-button>
  <c-button variant-color="blue" size="sm">
    Button
  </c-button>
  <c-button variant-color="blue" size="md">
    Button
  </c-button>
  <c-button variant-color="blue" size="lg">
    Button
  </c-button>
</c-button-group>
```

### Button Variant

Use the `variant` prop to change the visual style of the `CButton`. You can set the value to `solid`, `ghost`, `outline`, or `link`.

```vue live=true
<c-button-group :spacing="4">
  <c-button variant-color="blue" variant="solid">
    Button
  </c-button>
  <c-button variant-color="blue" variant="outline">
    Button
  </c-button>
  <c-button variant-color="blue" variant="ghost">
    Button
  </c-button>
  <c-button variant-color="blue" variant="link">
    Button
  </c-button>
</c-button-group>    
```


### Button with Icon

You can add left and right icons to the Button component. See how to [add icons](#/icon) to your project.

```vue live=true
<c-button-group :spacing="4">
  <c-button left-icon="email" variant-color="blue" variant="solid">
    Email
  </c-button>
  <c-button right-icon="arrow-forward" variant-color="blue" variant="outline">
    Call us
  </c-button>
</c-button-group>    
```

### Button loading state

Pass `isLoading` prop to the Button component to show it's loading state. You can optionally pass `loadingText` prop, if you do, the button will show a spinner and the loading text. Otherwise, the button will take the width of the text label and show only the spinner.

```vue live=true
<c-button-group :spacing="4">
  <c-button isLoading variant-color="blue" variant="solid">
    Email
  </c-button>
  <c-button
    is-loading
    loading-text="Submitting"
    variant-color="blue"
    variant="outline"
  >
    Submit
  </c-button>
</c-button-group>    
```

### Accessibility

- `CButton` has `role` button.
- When `CButton` has focus, `space` and `enter` activates it.

### Composition

`CButton` composes [`CPseudobox`](#) and all props (variant, variantColor, etc.) are converted to style props. This means you can override any style of the `CButton` via props.

```vue live=true
//  The size prop affects the height of the button
//  but I can still override it by passing a custom height

  <c-button size="md" height="50px" width="250px" border="2px" border-color="green.500">
    Button
  </c-button>    
```

### Custom Button

In event you need to make your own custom button, you can leverage the `PseudoBox` component. It provides the `hover`, `focus`, `active` and `disabled` style props to style the button.

```vue live=true
<c-pseudoBox
  as="button"
  height="24px"
  line-height="1.2"
  transition="all 0.2s cubic-bezier(.08,.52,.52,1)"
  border="1px"
  px="8px"
  rounded="2px"
  fontSize="14px"
  font-weight="semibold"
  bg="#f5f6f7"
  border-color="#ccd0d5"
  color="#4b4f56"
  :_active="{ bg: 'tomato' }"
>
  Join Group
</c-pseudoBox>
```

## Props

The Button composes the `CPseudoBox` component so you can pass props for `CPseudoBox`. These are props related to the Button component.

| Name                  | Type                                            | Default | Description                                                                                             |
| --------------------- | ------------------------------------------------| --------| ------------------------------------------------------------------------------------------------------- |
| `aria-label`          | `string`                                         |         | The label of the button                                                                                 |
| `variant `            | `string`                                         |         | The color of the button. Use a color key passed in `theme.colors`.                                      |
| `variantColor`        | `outline`, `ghost`, `unstyled` , `link` , `solid` | `solid` | The color of the button. Use a color key passed in `theme.colors`.                                      |
| `isDisabled`          | `boolean`                                        |         | If `true`, the button will be disabled.                                                                 |
| `isLoading`           | `boolean`                                        |         | If `true`, the button will show a spinner                                                               |
| `loadingText`         | `string`                                         |         | The label to show in the button when isLoading is true. If no text is passed, it only shows the spinner |
| `size`                | `xs`, `sm`,`md`, `lg`                             | `md`    | The size of the button                                                                                  |