Actions and forms

Button

Primary, secondary, ghost, and danger actions.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { Button } from "@cofob/design-system-react";

/**
 * Complete Button parameter reference.
 * @param variant
 *   type: "primary" | "secondary" | "ghost" | "danger"
 *   default: "primary" or component default
 *   example: "secondary"
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param loading
 *   type: boolean
 *   default: false
 *   example: true
 * @param leading/startIcon
 *   type: Snippet (Svelte) | LucideIcon or ReactNode (React)
 *   default: —
 *   example: leading snippet / startIcon={Save}
 * @param trailing/endIcon
 *   type: Snippet (Svelte) | LucideIcon or ReactNode (React)
 *   default: —
 *   example: trailing snippet / endIcon={ArrowRight}
 * @param button attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function ButtonExample() {
  return (
    <Button>Content</Button>
  );
}

Svelte

<script lang="ts">
  import { Button } from "@cofob/design-system-svelte";

  // Complete Button parameter reference.
  // variant
  //   type: "primary" | "secondary" | "ghost" | "danger"
  //   default: "primary" or component default
  //   example: "secondary"
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // loading
  //   type: boolean
  //   default: false
  //   example: true
  // fullWidth
  //   type: boolean
  //   default: false
  //   example: true
  // leading/startIcon
  //   type: Snippet (Svelte) | LucideIcon or ReactNode (React)
  //   default: —
  //   example: leading snippet / startIcon={Save}
  // trailing/endIcon
  //   type: Snippet (Svelte) | LucideIcon or ReactNode (React)
  //   default: —
  //   example: trailing snippet / endIcon={ArrowRight}
  // button attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<Button>Content</Button>

HTML

<!--
  Complete Button parameter reference.
  variant
    type: "primary" | "secondary" | "ghost" | "danger"
    default: "primary" or component default
    example: "secondary"
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  loading
    type: boolean
    default: false
    example: true
  fullWidth
    type: boolean
    default: false
    example: true
  leading/startIcon
    type: Snippet (Svelte) | LucideIcon or ReactNode (React)
    default: —
    example: leading snippet / startIcon={Save}
  trailing/endIcon
    type: Snippet (Svelte) | LucideIcon or ReactNode (React)
    default: —
    example: trailing snippet / endIcon={ArrowRight}
  button attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<button class="cf-button" data-variant="primary">Save</button>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-button`
Adapters	Native · React · Svelte
Primary props	variant · size · tone · loading · fullWidth · leading/startIcon · trailing/endIcon · button attributes · children
Documented states	primary · secondary · ghost · danger · loading · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"primary" or component default`	React · Svelte · HTML	`"secondary"`	Selects the component's visual treatment.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`tone`	`"neutral" \| "accent" \| "info" \| "success" \| "warning" \| "danger"`	`"neutral"`	Svelte · HTML	`"success"`	Applies semantic color intent without hard-coded colors.
`loading`	`boolean`	`false`	React · Svelte · HTML	`true`	Shows progress, preserves width, and disables repeated activation.
`fullWidth`	`boolean`	`false`	Svelte · HTML	`true`	Expands the Svelte button to its container width.
`leading/startIcon`	`Snippet (Svelte) \| LucideIcon or ReactNode (React)`	`—`	React · Svelte · HTML	`leading snippet / startIcon={Save}`	Supplies leading icon content using the adapter's composition API.
`trailing/endIcon`	`Snippet (Svelte) \| LucideIcon or ReactNode (React)`	`—`	React · Svelte · HTML	`trailing snippet / endIcon={ArrowRight}`	Supplies trailing icon content using the adapter's composition API.
`button attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.