Button

Usage

import { Button, ButtonGroup } from "chakra-ui-solid";

<Button>Click me</Button>

Examples

Sizes

Use the size prop to change the size of the button.

Variants

Use the variant prop to change the visual style of the Button.

Icon

Use icons within a button

Color

Use the colorPalette prop to change the color of the button

Disabled

Use the disabled prop to disable the button.

Disabled Link

When using the disabled prop with a link, you need to prevent the default behavior of the link and add the data-disabled attribute.

Loading

Pass the loading and loadingText props to the Button component to show a loading spinner and add a loading text.

Here’s an example of how to toggle the loading state of a button while keeping the width of the button the same.

Spinner Placement

Use the spinnerPlacement prop to change the placement of the spinner.

Custom Spinner

Use the spinner prop to change the spinner.

Group

Use the ButtonGroup component to group buttons together. This component allows you pass common recipe properties to inner buttons.

To flush the buttons, pass the attached prop.

Responsive Size

Use the object syntax on the size prop to make the button size responsive.

Radius

Use the rounded prop to change the radius of the button.

As Link

Use the render prop to render a button as a link.

Ref

Here’s how to access the underlying element reference. Solid has no forwardRef, so there is nothing to wrap: a ref is a prop like any other and reaches the element on the spread.

const Demo = () => {
  let ref: HTMLButtonElement | undefined;
  return <Button ref={ref}>Click me</Button>;
};

Props