Button

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.

Import

import { Button } from '@sajari-ui/core';

import { Button } from '@sajari-ui/core';

Usage

Editable Example

<Button appearance="primary">Button</Button>

<Button appearance="primary">Button</Button>

Sizes

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

Editable Example

<ButtonGroup>
  <Button appearance="primary" size="xs">
    Button
  </Button>
  <Button appearance="primary" size="sm">
    Button
  </Button>
  <Button appearance="primary" size="md">
    Button
  </Button>
  <Button appearance="primary" size="lg">
    Button
  </Button>
  <Button appearance="primary" size="xl">
    Button
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button appearance="primary" size="xs">
    Button
  </Button>
  <Button appearance="primary" size="sm">
    Button
  </Button>
  <Button appearance="primary" size="md">
    Button
  </Button>
  <Button appearance="primary" size="lg">
    Button
  </Button>
  <Button appearance="primary" size="xl">
    Button
  </Button>
</ButtonGroup>

Appearance

Use the appearance prop to change the visual style of the Button. You can set the value to default, primary, secondary, success, warning, danger, ghost, link, or subtle-link.

Editable Example

<ButtonGroup>
  <Button>Button</Button>
  <Button appearance="primary">Button</Button>
  <Button appearance="secondary">Button</Button>
  <Button appearance="success">Button</Button>
  <Button appearance="warning">Button</Button>
  <Button appearance="danger">Button</Button>
  <Button appearance="ghost">Button</Button>
  <Button appearance="link">Button</Button>
  <Button appearance="subtle-link">Button</Button>
</ButtonGroup>

<ButtonGroup>
  <Button>Button</Button>
  <Button appearance="primary">Button</Button>
  <Button appearance="secondary">Button</Button>
  <Button appearance="success">Button</Button>
  <Button appearance="warning">Button</Button>
  <Button appearance="danger">Button</Button>
  <Button appearance="ghost">Button</Button>
  <Button appearance="link">Button</Button>
  <Button appearance="subtle-link">Button</Button>
</ButtonGroup>

With Icon

You can add left and right icons to the Button components. See how to add icons.

Editable Example

<ButtonGroup>
  <Button appearance="primary" iconBefore="send-message">
    Email
  </Button>
  <Button iconAfter="arrow-right">View</Button>
  <Button iconBefore="logo-google-color" whitespace="whitespace-nowrap">
    Sign in with Google
  </Button>
</ButtonGroup>

<ButtonGroup>
  <Button appearance="primary" iconBefore="send-message">
    Email
  </Button>
  <Button iconAfter="arrow-right">View</Button>
  <Button iconBefore="logo-google-color" whitespace="whitespace-nowrap">
    Sign in with Google
  </Button>
</ButtonGroup>

As a link

Buttons can be used as links.

Editable Example

View

<Button href="https://sajari.com" external>
  View
</Button>

<Button href="https://sajari.com" external>
  View
</Button>

Loading state

Pass loading 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

function Example() {
  const [loading, setLoading] = React.useState(true);

  return (
    <>
      <Switch checked={loading} onChange={(e) => setLoading(e.target.checked)}>
        Loading
      </Switch>

      <ButtonGroup margin="mt-4">
        <Button loading={loading}>Button</Button>
        <Button appearance="primary" iconBefore="send-message" loading={loading}>
          Email
        </Button>
        <Button appearance="primary" loading={loading} loadingText="Saving...">
          Submit
        </Button>
        <Button appearance="ghost" loading={loading}>
          Button
        </Button>
        <Button appearance="link" loading={loading}>
          Button
        </Button>
        <Button appearance="subtle-link" loading={loading}>
          Button
        </Button>
      </ButtonGroup>
    </>
  );
}

function Example() {
  const [loading, setLoading] = React.useState(true);
  return (
    <>
      <Switch checked={loading} onChange={(e) => setLoading(e.target.checked)}>
        Loading
      </Switch>
      <ButtonGroup margin="mt-4">
        <Button loading={loading}>Button</Button>
        <Button appearance="primary" iconBefore="send-message" loading={loading}>
          Email
        </Button>
        <Button appearance="primary" loading={loading} loadingText="Saving...">
          Submit
        </Button>
        <Button appearance="ghost" loading={loading}>
          Button
        </Button>
        <Button appearance="link" loading={loading}>
          Button
        </Button>
        <Button appearance="subtle-link" loading={loading}>
          Button
        </Button>
      </ButtonGroup>
    </>
  );
}

Disabled state

Pass disabled prop to the Button component to disable it's functionality. This will disable the buttons default functionality and dim it's appearance.

Editable Example

Disabled

function Example() {
  const [disabled, setDisabled] = React.useState(true);

  return (
    <>
      <Switch checked={disabled} onChange={(e) => setDisabled(e.target.checked)}>
        Disabled
      </Switch>

      <ButtonGroup margin="mt-4">
        <Button disabled={disabled}>Button</Button>
        <Button appearance="primary" disabled={disabled}>
          Button
        </Button>
        <Button appearance="secondary" disabled={disabled}>
          Button
        </Button>
        <Button appearance="success" disabled={disabled}>
          Button
        </Button>
        <Button appearance="warning" disabled={disabled}>
          Button
        </Button>
        <Button appearance="danger" disabled={disabled}>
          Button
        </Button>
        <Button appearance="ghost" disabled={disabled}>
          Button
        </Button>
        <Button appearance="link" disabled={disabled}>
          Button
        </Button>
        <Button appearance="subtle-link" disabled={disabled}>
          Button
        </Button>
      </ButtonGroup>
    </>
  );
}

function Example() {
  const [disabled, setDisabled] = React.useState(true);
  return (
    <>
      <Switch checked={disabled} onChange={(e) => setDisabled(e.target.checked)}>
        Disabled
      </Switch>
      <ButtonGroup margin="mt-4">
        <Button disabled={disabled}>Button</Button>
        <Button appearance="primary" disabled={disabled}>
          Button
        </Button>
        <Button appearance="secondary" disabled={disabled}>
          Button
        </Button>
        <Button appearance="success" disabled={disabled}>
          Button
        </Button>
        <Button appearance="warning" disabled={disabled}>
          Button
        </Button>
        <Button appearance="danger" disabled={disabled}>
          Button
        </Button>
        <Button appearance="ghost" disabled={disabled}>
          Button
        </Button>
        <Button appearance="link" disabled={disabled}>
          Button
        </Button>
        <Button appearance="subtle-link" disabled={disabled}>
          Button
        </Button>
      </ButtonGroup>
    </>
  );
}

Accessibility

Button has role button.
When Button has focus, Space and Enter activates it.

Composition

Button composes Box and all props you pass (appearance, size, etc.) are converted to style props. This means you can override any style of the Button via props.

Editable Example

// The size prop affects the height of the button
// but I can still override it by passing a custom height
<Button
  appearance="primary"
  width="w-32"
  borderColor="border-blue-200"
  backgroundColor="bg-blue-100"
  textColor="text-blue-500"
  fontWeight="font-semibold"
>
  Button
</Button>

// The size prop affects the height of the button
// but I can still override it by passing a custom height
<Button
  appearance="primary"
  width="w-32"
  borderColor="border-blue-200"
  backgroundColor="bg-blue-100"
  textColor="text-blue-500"
  fontWeight="font-semibold"
>
  Button
</Button>

Custom Button

In event you need to make your own custom button, you can leverage the Box component.

Editable Example

// Button from facebook.com
<Box
  as="button"
  lineHeight="leading-tight"
  transitionProperty="transition-all"
  transitionDuration="duration-200"
  borderWidth="border"
  padding={['px-2', 'py-1']}
  borderRadius="rounded-sm"
  fontSize="text-sm"
  fontWeight="font-semibold"
  backgroundColor={['bg-gray-50', 'hover:bg-gray-100']}
  borderColor="border-gray-200"
  textColor="text-gray-600"
  outline="outline-none"
  ringWidth="focus:ring"
  ringColor="focus:ring-gray-200"
  ringOpacity="focus:ring-opacity-50"
>
  Join Group
</Box>

// Button from facebook.com
<Box
  as="button"
  lineHeight="leading-tight"
  transitionProperty="transition-all"
  transitionDuration="duration-200"
  borderWidth="border"
  padding={['px-2', 'py-1']}
  borderRadius="rounded-sm"
  fontSize="text-sm"
  fontWeight="font-semibold"
  backgroundColor={['bg-gray-50', 'hover:bg-gray-100']}
  borderColor="border-gray-200"
  textColor="text-gray-600"
  outline="outline-none"
  ringWidth="focus:ring"
  ringColor="focus:ring-gray-200"
  ringOpacity="focus:ring-opacity-50"
>
  Join Group
</Box>

Props

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

Name	Type	Default	Description
`aria-label`	`string`		The label of the button
`appearance`	`default`, `primary`, `secondary`, `success`, `warning`, `danger`, `ghost`, `link`, `subtle-link`, `none`	`default`	The variant of the button style to use.
`disabled`	`boolean`		If `true`, the button will be disabled.
`loading`	`boolean`		If `true`, the button will show a spinner.
`loadingText`	`string`		The label to show in the button when `loading` is true. If no text is passed, it only shows the spinner
`size`	`xs`, `sm`, `md`, `lg` , `xl`	`md`	The size of the button.
`iconBefore`	`IconProps['name']`		An icon to display before any children.
`iconAfter`	`IconProps['name']`		An icon to display after any children.
`iconBeforeSize`	`IconProps['size']`		The size of the icon to display before any children.
`iconAfterSize`	`IconProps['size']`		The size of the icon to display after any children.
`iconSize`	`IconProps['size']`		Shorthand to set both `iconBeforeSize` and `iconAfterSize`.
`external`	`boolean`		If `true`, the link will open in new tab.
`href`	`string`		a link for the button.
`target`	`string`		The target for the link to open.