@vibe-labs/design-components-buttons

Button component tokens, styles, and TypeScript types for the Vibe Design System.

Usage

@import "@vibe-labs/design-components-buttons";

import { ButtonSizes, ButtonVariants, ButtonShapes } from "@vibe-labs/design-components-buttons/types";
import type { ButtonSize, ButtonVariant, ButtonShape, ButtonStyleProps } from "@vibe-labs/design-components-buttons/types";

Contents

Tokens (button.css)

Component-specific tokens defined in @layer vibe.tokens. Core sizing tokens (--btn-height-*, --btn-px-*, --btn-radius, --btn-font-weight, --btn-font-size-*) are owned by @vibe-labs/design-forms.

Variant Tokens

Each variant defines bg, color, border, hover, and active states:

• Primary — --btn-primary-{bg|color|border|hover-bg|hover-border|active-bg|active-border}
• Secondary — --btn-secondary-{bg|color|border|hover-bg|hover-border|active-bg}
• Ghost — --btn-ghost-{color|hover-bg|active-bg}
• Danger — --btn-danger-{bg|color|border|hover-bg|hover-border|active-bg|active-border}
• Link — --btn-link-color

Other Tokens

Token	Default	Description
--btn-loading-spinner-width	--spinner-width (2px)	Loading spinner border width
--btn-spinner-color	--color-accent-contrast	Spinner color
--btn-group-overlap	--border-width-1	Negative margin between grouped buttons

Generated Styles (button.g.css)

Component classes generated into @layer vibe.components.

Variants

Variant	Description
primary	Accent-colored solid button
secondary	Elevated surface with border
ghost	Transparent with hover overlay
danger	Danger-colored solid button
link	Inline link style, no padding/height

Sizes

sm · md · lg (default: md, tokens from forms package)

Shapes

Shape	Description
default	Standard --btn-radius — no data-shape attribute emitted
circle	Full radius (--radius-full) with hover scale(1.1) / active(1.05)

Shapes are driven by data-shape attribute. The base transition includes transform so shape animations compose cleanly with variant colour transitions.

States

• Disabled — reduced opacity, cursor: not-allowed, no pointer events (supports disabled and aria-disabled)
• Loading — hides text, shows CSS spinner via ::after pseudo-element
• Focus visible — ring via box-shadow using --ring-color / --ring-offset-*

Modifiers

• full — width: 100%
• icon — removes horizontal padding, aspect-ratio: 1 for square icon buttons

Button Group

Inline flex container that strips inner border radii and overlaps borders between adjacent buttons.

TypeScript Types (types/)

ButtonSizes    // ["sm", "md", "lg"]
ButtonVariants // ["primary", "secondary", "ghost", "danger", "link"]
ButtonShapes   // ["default", "circle"]

type ButtonSize
type ButtonVariant
type ButtonShape

interface ButtonStyleProps {
  variant?: ButtonVariant
  size?: ButtonSize
  shape?: ButtonShape
  loading?: boolean
  full?: boolean
  icon?: boolean
  disabled?: boolean
  color?: string
}

interface ButtonGroupStyleProps { label?: string }

Dist Structure

File	Description
index.css	Barrel — imports tokens + generated styles
button.css	Token definitions (variant colors, spinner, group)
button.g.css	Generated component styles
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

Requires @vibe-labs/design-forms (sizing tokens) and @vibe-labs/design (colors, surfaces, transitions, elevation).

Build

npm run build