Button - rafty/ui Docs

Buttons enable users to take action and make choices with a single click.

It is built over native html button component, enhanced with our styling conventions and additional props to manage various states, sizes, colors, and inclusion of icons

Anatomy

Import the component.

import { Button } from "@rafty/ui";

<Button />;

Usage

By default, it is a medium sized secondary solid button with hover effects and focus ring..

<Button>
  Button
</Button>

Size

There are 5 size options in button: sm, md (default), lg, icon & fab.
icon size is used when you want only icon.
fab size is used for circular button.

<div className="flex items-center gap-4">
  <Button size="sm">
    Button
  </Button>
  <Button size="md">
    Button
  </Button>
  <Button size="lg">
    Button
  </Button>
  <Button size="fab">
    <ArchiveBoxIcon
      className="stroke-2"
      height={16}
      width={16}
    />
  </Button>
  <Button size="icon">
    <BackspaceIcon
      className="stroke-2"
      height={16}
      width={16}
    />
  </Button>
</div>

ColorScheme

There are 4 colorScheme options in button: primary (default), secondary, error & success.

<div className="flex items-center gap-4">
  <Button colorScheme="primary">
    Button
  </Button>
  <Button colorScheme="secondary">
    Button
  </Button>
  <Button colorScheme="error">
    Button
  </Button>
  <Button colorScheme="success">
    Button
  </Button>
</div>

Variant

There are 3 variant in button: solid (default), outline & ghost.

<div className="flex items-center gap-4">
  <Button variant="solid">
    Button
  </Button>
  <Button variant="outline">
    Button
  </Button>
  <Button variant="ghost">
    Button
  </Button>
</div>

LeftIcon & RightIcon

You can pass JSX Element in leftIcon to add icon on left side of button.
You can pass JSX Element in rightIcon to add icon on right side of button.

<div className="flex items-center gap-4">
  <Button
    colorScheme="primary"
    leftIcon={<PhoneIcon className="stroke-2" height={16} width={16}/>}
    variant="solid"
  >
    Button
  </Button>
  <Button
    colorScheme="primary"
    rightIcon={<PaperAirplaneIcon className="stroke-2" height={16} width={16}/>}
    variant="solid"
  >
    Button
  </Button>
</div>

UnStyled

Pass isUnstyled prop to remove style component.

<Button
  className="hover:bg-secondary-200 dark:bg-secondary-500 dark:hover:bg-secondary-700 rounded-lg bg-white p-2 px-5 dark:text-white"
  isUnstyled
>
  Button
</Button>

Active

You can manage the active state of button using isActive prop.

<Button isActive>
  Button
</Button>

Loading

You can manage the loading state of the button using this prop.
You can also change the button text when the button is in loading state using loadingText prop.

<Button isLoading>
  Button
</Button>

Disabled

You can manage disabled button state using isDisabled prop.

<Button isDisabled>
  Button
</Button>

API

Property	Description	Type	Default
isUnstyled	Removes Style from component	`boolean`	false