Button

Buttons allow users to trigger an action or event with a single click. They are a core interactive element in any application interface.

Default

Default button comes with primary color and filled variant.

tsx

import { Button } from "@hummingbirdui/react/button";

export default function ButtonDefault() {
  return <Button>Click me</Button>;
}

Variants

Use variant prop to change the visual style of the button.

tsx

import { Button } from "@hummingbirdui/react";

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-2 justify-center">
      <Button variant="filled">Filled</Button>
      <Button variant="subtle">Subtle</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="text">Text</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Colors

Hummingbird buttons support multiple colors. Use color prop to change the color of the button.

tsx

import { Button } from "@hummingbirdui/react";

export default function ButtonColors() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="info">Info</Button>
      <Button color="success">Success</Button>
      <Button color="warning">Warning</Button>
      <Button color="danger">Danger</Button>
      <Button color="neutral">Neutral</Button>
      <Button color="light">Light</Button>
      <Button color="dark">Dark</Button>
    </div>
  );
}

Sizes

Buttons come in three different sizes: sm, md (default), and lg.

tsx

import { Button } from "@hummingbirdui/react";

export default function ButtonSizes() {
  return (
    <div className="text-center space-x-2">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Shapes

You can change the shape of the button using the shape prop.

tsx

import { Button } from "@hummingbirdui/react";
import { Plus } from "lucide-react";

export default function ButtonShapes() {
  return (
    <div className="text-center space-x-2">
      <Button shape="square">
        <Plus />
      </Button>
      <Button shape="circle">
        <Plus />
      </Button>
    </div>
  );
}

Button with icon

tsx

import { Button } from "@hummingbirdui/react";
import { Mail, Trash2 } from "lucide-react";

export default function ButtonWithIcon() {
  return (
    <div className="flex items-center justify-center gap-2 flex-wrap">
      <Button color="info">
        <Mail className="size-4" /> Send Invitation
      </Button>
      <Button color="danger">
        Remove
        <Trash2 className="size-4" />
      </Button>
    </div>
  );
}

Icon button

tsx

import { Button } from "@hummingbirdui/react";
import { Heart, ThumbsUp } from "lucide-react";

export default function ButtonShapes() {
  return (
    <div className="text-center space-x-2">
      <Button variant="icon">
        <ThumbsUp />
      </Button>
      <Button variant="icon" color="danger">
        <Heart />
      </Button>
    </div>
  );
}

Block button

tsx

import { Button } from "@hummingbirdui/react";

export default function ButtonFullWidth() {
  return (
    <div className="flex flex-col max-w-100 mx-auto gap-2">
      <Button className="rounded-full">Confirm</Button>
      <Button color="danger" variant="subtle" className="rounded-full">
        Cancel
      </Button>
    </div>
  );
}

Disabled button

tsx

import { Button } from "@hummingbirdui/react";

export default function ButtonDisabled() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Button disabled>Primary</Button>
      <Button color="secondary" variant="subtle" disabled>
        Secondary
      </Button>
    </div>
  );
}

API Reference

The Button component renders a native <button> element and accepts all standard button attributes (except color, which is reserved for styling) in addition to the props below.

PropTypeDefaultDescription
variant"filled" | "subtle" | "outline" | "text" | "link" | "icon""filled"Visual style of the button.
color"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral" | "light" | "dark""primary"Color theme of the button.
size"sm" | "md" | "lg""md"Size of the button.
shape"default" | "square" | "circle""default"Shape of the button. Use square or circle for icon-only buttons.
asChildbooleanfalseMerge props onto the child element instead of rendering a <button> (e.g. to render a link as a button).
classNamestring—Additional classes merged with the generated button classes.

Styling

Hummingbird React button is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available button classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousButton GroupNextCard