Button

CombricDocumentation version

Native button with bounded visual variants and sizes.

Import and usage

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

Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.

Examples

Default button

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

export function Example() {
  return <Button>Save changes</Button>;
}

Disabled button

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

export function Example() {
  return <Button disabled>Save changes</Button>;
}

Variants

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

export function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  );
}

Sizes

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

export function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", gap: "0.75rem" }}>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Accent and danger variants

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

export function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
      <Button variant="accent">Accent</Button>
      <Button variant="danger">Danger</Button>
    </div>
  );
}

Radius presets

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

export function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "0.75rem" }}>
      <Button>Default</Button>
      <Button radius="none">None</Button>
      <Button radius="sm">Small</Button>
      <Button radius="md">Medium</Button>
      <Button radius="lg">Large</Button>
      <Button radius="full">Full</Button>
    </div>
  );
}

Public API

Public exports
Name
`Button`

Documented contracts
Property / capability	Published contract
variant	primary \| secondary \| ghost \| accent \| danger
size	sm \| md \| lg
radius	none \| sm \| md \| lg \| full
Contract	type defaults to button

Accessibility

Retains native button semantics, disabled behavior, and consumer-provided accessible naming.

Keyboard

Native Enter and Space activation.

CSS and customization

Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.

Source

View source on GitHub