Button - Dreamy UI

Button

Button is a primary action element that performs an action when clicked.

#

Installation

npx dreamy add button

pnpm dlx dreamy add button

yarn dlx dreamy add button

bunx dreamy add button

#

Usage

Button is used to trigger an action or event, such as submitting a form or opening a dialog. It provides various styling options and supports different variants.

<Button>Button</Button>

#

Variants

You can change the variant of the Button by using the variant prop.

<Flex wrapped gap={2}>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="solid">Solid</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
</Flex>

#

Sizes

You can set the size of the Button by using the size prop.

<Flex wrapped gap={2}>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</Flex>

#

Color

When using solid, outline and ghost variants, the button color will follow the current color scheme.

For solid and ghost variants, you can just use color property, it will work the same. However for outline variant, you need to use only scheme property.

<Flex wrapped gap={2}>
  <Button variant="solid" scheme="success">Solid success</Button>
  <Button variant="outline" scheme="warning">Outline warning</Button>
  <Button variant="ghost" scheme="error">Ghost error</Button>
</Flex>

#

Using Icons

You can add icons on left or right side of the Button by using the leftIcon or rightIcon prop.

Left Icon

<Flex wrapped gap={2}>
  <Button leftIcon={<IoClose />}>Cancel</Button>
  <Button leftIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>

Right Icon

<Flex wrapped gap={2}>
  <Button rightIcon={<IoClose />}>Cancel</Button>
  <Button rightIcon={<HiOutlineMail />} variant="primary">Home</Button>
</Flex>

#

Disabled

You can disable the Button by using the isDisabled prop.

<Button isDisabled>Disabled</Button>

#

Loading State

You can show the loading state of the Button by using the isLoading prop.

<Button isLoading variant="primary">Loading</Button>

With label

<Button isLoading variant="primary" loadingText="Loading">Loading</Button>

With label and spinner on the right

<Button isLoading variant="primary" loadingText="Loading" spinnerPlacement="end">Loading</Button>

#

Disable ripple

You can disable the ripple effect of the Button by using the disableRipple prop. This can be provided in DreamyProvider as a global setting.

<Button w="fit-content" disableRipple>Disabled Ripple</Button>

#

Group

Use the Group component to group multiple Buttons together.

<Group attached>
	<Button variant="outline">Button 1</Button>
	<Button variant="outline">Button 2</Button>
	<Button variant="outline">Button 3</Button>
</Group>

Breadcrumb

Card