bloomkit

Button

Bloom's signature component. Pill-shaped with gentle hover lift and soft press feedback.

Installation

npm install @bloomkit/react

Usage

import { Button } from "@bloomkit/react";
 
<Button variant="primary">Save changes</Button>

Variants

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="accent">Accent</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>

Sizes

Four size presets. md is the default.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
 
{/* icon size — 44×44 square, for icon-only buttons */}
<Button size="icon" variant="ghost" aria-label="Close">
  <XIcon />
</Button>
  • sm — 36px tall, 13px text. Dense UI, toolbars, inline actions.
  • md — 44px tall, 14px text. Default.
  • lg — 52px tall, 16px text. Hero CTAs, landing pages.
  • icon — 44×44 square, zero padding. Always pass aria-label since there's no text.

As Child

Use the asChild prop to render as a different element:

<Button asChild>
  <a href="/somewhere">Link styled as button</a>
</Button>

Props

PropTypeDefaultDescription
variant"primary" | "secondary" | "ghost" | "accent" | "success" | "warning" | "danger""primary"Visual style of the button
size"sm" | "md" | "lg" | "icon""md"Size preset. icon is a 44×44 square for icon-only buttons.
asChildbooleanfalseRender as child element instead of button (via Radix Slot)
disabledbooleanfalseDisable the button
classNamestring""Additional Tailwind classes (merged via tailwind-merge)
childrenReactNode—Button content