Button

The Button component triggers actions, behaviors, or events based on user input.

Usage

A Dracula UI button behaves like regular HTML buttons and accepts the same contents and properties.

<button class="drac-btn drac-bg-purple">Dracula</button>
<Button color="purple">Dracula</Button>;

Colors

Buttons can be customized to use any of the Dracula UI theme colors, including all solid, gradient, and animated colors.

<div>
  <button class="drac-btn drac-bg-purple drac-m-sm">Purple</button
  ><button class="drac-btn drac-bg-purple-cyan drac-m-sm">Purple Cyan</button>
</div>
<div>
  <Button color="purple" m="sm">
    Purple
  </Button>
  <Button color="purpleCyan" m="sm">
    Purple Cyan
  </Button>
</div>;

Variants

Dracula UI ships with three distinct button variations that allow for different levels of hierarchy and usage.

<div class="drac-box">
  <button class="drac-btn drac-bg-purple drac-m-sm">Normal</button
  ><button
    class="drac-btn drac-bg-purple-transparent drac-btn-ghost drac-text-purple drac-m-sm"
  >
    Ghost</button
  ><button
    class="drac-btn drac-bg-purple drac-btn-outline drac-text-purple drac-m-sm"
  >
    Outline
  </button>
</div>
<Box>
  <Button color="purple" m="sm">
    Normal
  </Button>
  <Button variant="ghost" color="purple" m="sm">
    Ghost
  </Button>
  <Button variant="outline" color="purple" m="sm">
    Outline
  </Button>
</Box>;

Disabled

A disabled button can't used, clicked, or even submitted with a form.

<div class="drac-box">
  <button class="drac-btn drac-bg-purple drac-m-sm" disabled="">Normal</button
  ><button
    class="drac-btn drac-bg-purple-transparent drac-btn-ghost drac-text-purple drac-m-sm"
    disabled=""
  >
    Ghost</button
  ><button
    class="drac-btn drac-bg-purple drac-btn-outline drac-text-purple drac-m-sm"
    disabled=""
  >
    Outline
  </button>
</div>
<Box>
  <Button disabled={true} color="purple" m="sm">
    Normal
  </Button>
  <Button disabled={true} variant="ghost" color="purple" m="sm">
    Ghost
  </Button>
  <Button disabled={true} variant="outline" color="purple" m="sm">
    Outline
  </Button>
</Box>;

Sizes

Button sizes range from `xs` to `lg` using the Dracula UI size scale.

<div class="drac-box">
  <button class="drac-btn drac-bg-purple drac-btn-xs drac-m-sm">xs</button
  ><button class="drac-btn drac-bg-purple drac-btn-sm drac-m-sm">sm</button
  ><button class="drac-btn drac-bg-purple drac-m-sm">md</button
  ><button class="drac-btn drac-bg-purple drac-btn-lg drac-m-sm">lg</button>
</div>
<Box>
  <Button color="purple" size="xs" m="sm">
    xs
  </Button>
  <Button color="purple" size="sm" m="sm">
    sm
  </Button>
  <Button color="purple" size="md" m="sm">
    md
  </Button>
  <Button color="purple" size="lg" m="sm">
    lg
  </Button>
</Box>;

Tags

By default, every Button is specified with the `<button>` tag, but you can change that to better match your semantic needs.

Anchor 
<div class="drac-box">
  <div class="drac-box">
    <button class="drac-btn drac-bg-green drac-m-sm">Button</button>
  </div>
  <div class="drac-box">
    <input
      class="drac-btn drac-bg-green drac-m-sm"
      type="submit"
      value="Submit"
    />
  </div>
  <div class="drac-box">
    <a class="drac-btn drac-bg-green drac-m-sm" href="#">Anchor</a>
  </div>
</div>
<Box>
  <Box>
    <Button as="button" m="sm">
      Button
    </Button>
  </Box>
  <Box>
    <Button as="input" m="sm" type="submit" value="Submit" />
  </Box>
  <Box>
    <Button as="a" href="#" m="sm">
      Anchor
    </Button>
  </Box>
</Box>;

Properties

color

A Dracula UI theme color for the Button.

"animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
size

Controls the size of the button based on pre-configured Dracula UI sizes.

"md" | "lg" | "sm" | "xs"
variant

Controls the Button style: `normal` -> Default solid Button with background color. `outline` -> A subtle variation of the Button component with a softer background color that highlights the action text. `ghost` -> A less prominent variation of the Button component that highlights hover interactions.

"normal" | "outline" | "ghost"
disabled

Controls the Button state. Mirrors the HTMLButtonElement `disabled` property.

boolean
as

"input" | "a" | "button"