Button

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.

See CButton's accessibility report

Import#

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

Usage#

Editable Example

<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.

Editable Example

<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.

Editable Example

<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 to your project.

Editable Example

<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.

Editable Example

<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.

Editable Example

//  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.

Editable Example

<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

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!