button.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

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.

Imports

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

<InteractiveCodeblock children={({ spreadProps }) => <Button${spreadProps}>Click me</Button>} booleanProps={["loading", "disabled"]} themeProps={{ size: "button.size", variant: "button.themeColor.base", themeColor: "button.themeColor", }} />

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>
  );
};

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>
  );
};

<Nextra.Callout> You can add extra variants & sizes via the theme file. Checkout theming guide. </Nextra.Callout>

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>
  );
};

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>
  );
};

API Reference

Button

<PropsTable data={[ { name: "size", default: "md", themeKey: "button.size", description: "Size of the button", }, { name: "themeColor", default: "base", themeKey: "button.themeColor", description: "Theme of the button", }, { name: "variant", default: "solid", themeKey: "button.themeColor.base", description: "Variant of the button", }, { name: "loading", default: "false", type: "boolean", description: "If true, the button will show a spinner", }, { name: "disabled", default: "false", type: "boolean", description: "If true, the button will be disabled", }, { name: "prefix", type: "React.ReactNode", description: "If added, the button will show an element before the button's label", }, { name: "suffix", type: "React.ReactNode", description: "If added, the button will show an element after the button's label", }, { name: "iconOnly", type: "React.ReactNode", description: "If added, the button will show an icon only, no label, and no prefix/suffix", }, { name: "spinner", type: "React.ReactNode", description: "If added, the button will show this spinner components", },

]} />