Button - Dreamy UI

Button

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

#

Import

Button - The true Button component.

import { Button } from "@dreamy-ui/react";

#

Usage

<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 background will follow the current color.

<Flex wrapped gap={2}>
  <Button variant="solid" color="success">Solid success</Button>
  <Button variant="outline" color="warning">Outline warning</Button>
  <Button variant="ghost" color="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>

#

Custom variant

Learn how to create a custom Button variant. See Theming documentation.

In your panda.config.ts, add a new variant:

import createDreamyPreset, { dreamyPlugin, parts } from "@dreamy-ui/panda-preset";
 
export default defineConfig({
    ...
    theme: {
        extend: {
            recipes: {
                button: {
                    variants: {
                        variant: {
                            glass: parts.button({
                                root: {
                                    bg: "currentColor/12",
                                    border: "1px solid",
                                    borderColor: "currentColor/50",
                                    boxShadow: "inset 0 0 4px {currentColor/12}",
                                    _hover: {
                                        bg: "currentColor/18"
                                    }
                                }
                            })
                        }
                    }
                }
            }
        }
    },
});

Now, save the file and use the new variant:

<Group>
	<Button variant="glass">Glass Default</Button>
	<Button variant="glass" color="primary">Glass Primary</Button>
	<Button variant="glass" color="success">Glass Success</Button>
</Group>

Box

Card