Button

The 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 '@aphrodite-ui/react';

Usage

<Button>Button</Button>

Button colors

Use the color prop to change the color of the Button. You can set the value to primary, neutral, success, info, warning or danger.

<div className="flex items-center gap-2">
  <Button color="primary">Button</Button>
  <Button color="neutral">Button</Button>
  <Button color="success">Button</Button>
  <Button color="info">Button</Button>
  <Button color="warning">Button</Button>
  <Button color="danger">Button</Button>
</div>

Button Shapes

Use the shape prop to change the shape of the Button. You can set the value to square or pill.

<div className="flex items-center gap-2">
  <Button shape="square">Button</Button>
  <Button shape="pill">Button</Button>
</div>

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.

<div className="flex items-center gap-2">
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
  <Button size="xl">Button</Button>
</div>

Button variants

Use the variant prop to change the visual style of the Button. You can set the value to solid, flat, ghost, outline or link.

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

Button with icon

You can add left and right icons to the Button component using the leftIcon and rightIcon props respectively.

<div className="flex items-center gap-2">
  <Button leftIcon={<FiMail className="h-5 w-5" />}>Button</Button>
  <Button
    rightIcon={<FiArrowRightCircle className="h-5 w-5" />}
    variant="outline"
  >
    Button
  </Button>
</div>

Button loading state

Pass the loading prop to show its loading state. By default, the button will show a spinner and leave the button's width unchanged. You can also pass the loadingText prop to show a spinner and the loading text.

<div className="flex items-center gap-2">
  <Button loading>Loading</Button>
  <Button variant="outline" loading loadingText="Submitting">
    Submit
  </Button>
</div>

You can change the spinner element to use custom loaders as per your design requirements. Pass the spinner prop and set it to a custom react element.

<Button loading spinner={<FiChrome className="h-5 w-5 animate-spin" />}>
  Click me
</Button>

When a loaderText is present, you can change the placement of the loader element to either start or end.

<div className="flex items-center gap-2">
  <Button
    variant="outline"
    loading
    loadingText="Loading"
    spinnerPlacement="start"
  >
    Submit
  </Button>
  <Button
    variant="outline"
    loading
    loadingText="Loading"
    spinnerPlacement="end"
  >
    Continue
  </Button>
</div>

Center

Icon Button