Button

The Button component can be used to trigger various kinds of user events such as submitting a form, opening a dialog, canceling an action, or performing a delete operation. It uses Reakit's button component internally.

import { Button, ButtonSpinner, CloseButton } from "@adaptui/react-tailwind";

Button: The button which has prefix/suffix icons support, variants & size.
CloseButton: Button which has accesibility to perform the close action

Usage

<Button>Click me</Button>

<Button>Click me</Button>

Disabled

Button sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg xl

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
    </div>
  );
};

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
      <Button size="xl">Extra Large</Button>
    </div>
  );
};

Button variants

Variants can be set using the variant prop. The default variant is solid. The available variants are: solid subtle outline ghost

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button variant="solid">Solid</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
};

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button variant="solid">Solid</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
};

💡

You can add extra variants & sizes via the theme file. Checkout theming guide.

Button prefix, suffix & iconOnly

You can pass iconOnly, prefix and suffix props to append or prepend any content inside of button.

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button iconOnly={<SlotIcon />} />
      <Button prefix={<SlotIcon />}>Search</Button>
      <Button suffix={<SlotIcon />}>Search</Button>
      <Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
        Search
      </Button>
    </div>
  );
};

import { Button } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-x-2">
      <Button iconOnly={<SlotIcon />} />
      <Button prefix={<SlotIcon />}>Search</Button>
      <Button suffix={<SlotIcon />}>Search</Button>
      <Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
        Search
      </Button>
    </div>
  );
};

Close Button

Component which comes with accessibility to close the dialogs or other actions

import { CloseButton } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-y-2">
      <div className="space-x-2">
        <CloseButton size="sm" />
        <CloseButton size="md" />
        <CloseButton size="lg" />
        <CloseButton size="xl" />
      </div>
      <div className="space-x-2">
        <CloseButton variant="solid" />
        <CloseButton variant="subtle" />
        <CloseButton variant="outline" />
        <CloseButton variant="ghost" />
      </div>
    </div>
  );
};

import { CloseButton } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <div className="space-y-2">
      <div className="space-x-2">
        <CloseButton size="sm" />
        <CloseButton size="md" />
        <CloseButton size="lg" />
        <CloseButton size="xl" />
      </div>
      <div className="space-x-2">
        <CloseButton variant="solid" />
        <CloseButton variant="subtle" />
        <CloseButton variant="outline" />
        <CloseButton variant="ghost" />
      </div>
    </div>
  );
};

API Reference

Button

Prop	Type	Default
`size`	`union`	`md`
`themeColor`	`union`	`base`
`variant`	`union`	`solid`
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`
`prefix`	`React.ReactNode`	-
`suffix`	`React.ReactNode`	-
`iconOnly`	`React.ReactNode`	-
`spinner`	`React.ReactNode`	-

Last updated on July 27, 2022