Button

To trigger an operation.

When To Use

A button means an operation (or a series of operations). Clicking a button will trigger its corresponding business logic.

In Hotdog-Ui we provide 6 types of button.

🔵 Default button: used for the main action, there can be at most one default button in a section.
⚪️ Ghost button: used for a series of actions without priority.
🔳 Outline button: used for actions with a clear boundary.
😶 Dashed button: commonly used for adding more actions.
🔤 Text button: used for the most secondary action.
🔗 Link button: used for external links.

And we provide 2 animations for buttons.

🏃‍♂️ Ripple: creates a wave effect on click.
🏃‍♀️ Pulse: makes the button grow and shrink continuously.

Colors are also customizable, you can choose from:

Primary

Secondary

Warning

Success

Info

Sharp

Muted

Accent

Installation


npx shadcn@latest add https://hotdogui.com/registry/button.json


pnpm dlx shadcn@latest add https://hotdogui.com/registry/button.json


yarn dlx shadcn@latest add https://hotdogui.com/registry/button.json


bun x shadcn@latest add https://hotdogui.com/registry/button.json

Examples

Button Variants

Button variants allow you to customize the appearance and behavior of buttons to fit different use cases.

Preview

Button Colors

Button colors allow you to customize the appearance of buttons to fit different themes and branding requirements.

Preview

Color And Variant Combinations

Animations

Animation effects can enhance the user experience by providing visual feedback when interacting with buttons.

Preview

Animation And Variant Combinations

Sizes

Button sizes allow you to adjust the dimensions of buttons to fit different layouts and design requirements.

Preview

Shapes

Preview

Loading and Disabled States

Preview

Code

ButtonStatesDemo.tsx

import React from "react";
import { Button } from "@/components/hotdog-ui";

export const ButtonStatesDemo = () => {
  return (
    <div className="flex flex-col space-y-4">
      <div className="flex gap-4">
        <Button variant="default" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="ghost" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="outline" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="dashed" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="text" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="link" color="secondary" disabled>
          Loading
        </Button>
      </div>
      <div className="flex gap-4">
        <Button variant="default" color="info" loading>
          Loading
        </Button>
        <Button variant="ghost" color="info" loading>
          Loading
        </Button>
        <Button variant="outline" color="info" loading>
          Loading
        </Button>
        <Button variant="dashed" color="info" loading>
          Loading
        </Button>
        <Button variant="text" color="info" loading>
          Loading
        </Button>
        <Button variant="link" color="info" loading>
          Loading
        </Button>
      </div>
      <div className="flex gap-4">
        <Button variant="default" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="ghost" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="outline" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="dashed" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="text" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="link" color="success" loading disabled>
          Loading
        </Button>
      </div>
      <div className="flex gap-4"></div>
    </div>
  );
};

Button Group

Preview

Code

ButtonStatesDemo.tsx

import React from "react";
import { Button } from "@/components/hotdog-ui";

export const ButtonStatesDemo = () => {
  return (
    <div className="flex flex-col space-y-4">
      <div className="flex gap-4">
        <Button variant="default" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="ghost" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="outline" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="dashed" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="text" color="secondary" disabled>
          Loading
        </Button>
        <Button variant="link" color="secondary" disabled>
          Loading
        </Button>
      </div>
      <div className="flex gap-4">
        <Button variant="default" color="info" loading>
          Loading
        </Button>
        <Button variant="ghost" color="info" loading>
          Loading
        </Button>
        <Button variant="outline" color="info" loading>
          Loading
        </Button>
        <Button variant="dashed" color="info" loading>
          Loading
        </Button>
        <Button variant="text" color="info" loading>
          Loading
        </Button>
        <Button variant="link" color="info" loading>
          Loading
        </Button>
      </div>
      <div className="flex gap-4">
        <Button variant="default" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="ghost" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="outline" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="dashed" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="text" color="success" loading disabled>
          Loading
        </Button>
        <Button variant="link" color="success" loading disabled>
          Loading
        </Button>
      </div>
      <div className="flex gap-4"></div>
    </div>
  );
};

Api

Property	Description	Type	Default
variant	The variant of the button	defaultghostoutlinedashedtextlink	default
animation	Set the animation of button	noneripplepulsebuttonshine	ripple
block	Option to fit button width to its parent width	boolean	false
classNames	Semantic DOM class	Record<SemanticDOM, string>	-
color	Set button color	primarysecondarydangerwarningsuccesssharpinfomutedaccent	primary
disabled	Disabled state of button	boolean	false
type	Set the original html type of button	submitresetbutton	button
loading	Set the loading status of button	boolean	false
shape	Can be used to set button shape	roundedsquarecircle	rounded
size	Set the size of button	defaultlargesmallicon	default
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-
onClick	Set the handler to handle click event	(event: React.MouseEvent<HTMLElement, MouseEvent>) => void	-
asChild	If true, the button will not render a button element, but instead render its children as the root element	boolean	false