Components > Button

Button

An interactive element used to perform an action such as submitting a form or opening a dialog.

inline-flex items-center justify-center border border-transparent font-medium rounded whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 text-white bg-primary-600 hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white focus:ring-primary-700 dark:hover:bg-primary-700 dark:hover:text-white dark:focus:bg-primary-700 dark:focus:text-white dark:bg-primary-600 dark:focus:ring-primary-600 text-base px-4 pt-1.5 pb-2 cursor-pointer

import React from 'react'
import { Button } from '@components/ui/Button';

() => {
  return (
    <Button 
      kind="primary"
      onClick={() => alert("Hello World")}
    >
      Hello World
    </Button>
  );
};

There are six kinds of buttons:

primary - should be used when you want to catch attention. Acts as the "Call to Action". There shouldn't be two or more primary buttons within a certain space to avoid confusion on which of them are important.
secondary - great to use in conjuction with primary buttons. Acts as other actions the user may take besides the primary button.
neutral - a variant of the secondary button for styling purposes. It acts as a clickable text.
success - an alternative style of the primary button.
danger - should be used to signify destructive actions like deleting a resource.
warn - should be used to signify an action that the user might be concerned about.

The Button UI component uses the button HTML element underneath so you can pass button attributes or even data-* attributes to it.

<Button
  type="submit"
  data-productid="1232"
>
  Submit
</Button>

Installation

Copy and paste this Button primitive at components/ui/Button.tsx.

Usage

import { Button } from '@components/ui/Button';

<Button>
  Hello
</Button>

Examples

Kinds

There are six kinds of buttons. You can update the variant by the kind prop. The default value is secondary.

Soft

You can toggle the soft version of a button by <Button soft />. It is false by default.

Outlined

You can toggle the outlined version of a button by <Button outlined />. It is false by default.

Ghost

You can toggle the ghost version of a button by <Button ghost />. It is false by default.

Combined Variants

You can combine variations for soft, outlined, and ghost buttons.

Sizes

There are four sizes a button can have. You can adjust the variant using the size prop. By default, it uses base.

Disabled State

Toggling the disabled prop to true will prevent any interactions to the button. It is advised to add a Tooltip as to why the button is disabled to avoid confusing for the users.

Loading State

For the loading state, you can use a loading icon and add a disabled prop to prevent any interactions to the button.

Selected

Toggle the selected prop will trigger the selected state.

With an Icon

You can add an icon next to the button text. Alternatively, there's an Icon Button component that you can use.

Table of Contents