Actions and forms

IconButton

Compact labelled action for a single Lucide icon.

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 { IconButton } from "@cofob/design-system-react";

/**
 * Complete IconButton parameter reference.
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param icon/children
 *   type: LucideIcon (React) | icon snippet (Svelte)
 *   required
 *   example: {Plus} / icon snippet
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param variant
 *   type: "primary" | "secondary" | "ghost" | "danger"
 *   default: "secondary"
 *   example: "secondary"
 * @param loading
 *   type: boolean
 *   default: false
 *   example: true
 * @param button attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function IconButtonExample() {
  return (
    <IconButton label="Add" icon={Plus} />
  );
}

Svelte

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

  // Complete IconButton parameter reference.
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // icon/children
  //   type: LucideIcon (React) | icon snippet (Svelte)
  //   required
  //   example: {Plus} / icon snippet
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // variant
  //   type: "primary" | "secondary" | "ghost" | "danger"
  //   default: "secondary"
  //   example: "secondary"
  // tone
  //   type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
  //   default: "neutral"
  //   example: "success"
  // loading
  //   type: boolean
  //   default: false
  //   example: true
  // button attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<IconButton label="Add" icon={Plus} />

HTML

<!--
  Complete IconButton parameter reference.
  label
    type: string | renderable content
    required
    example: "Accessible label"
  icon/children
    type: LucideIcon (React) | icon snippet (Svelte)
    required
    example: {Plus} / icon snippet
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  variant
    type: "primary" | "secondary" | "ghost" | "danger"
    default: "secondary"
    example: "secondary"
  tone
    type: "neutral" | "accent" | "info" | "success" | "warning" | "danger"
    default: "neutral"
    example: "success"
  loading
    type: boolean
    default: false
    example: true
  button attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<button class="cf-icon-button" aria-label="Add">+</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-icon-button`
Adapters	Native · React · Svelte
Primary props	label · icon/children · size · variant · tone · loading · button attributes
Documented states	default · hover/focus where interactive · disabled where applicable
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
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`icon/children`required	`LucideIcon (React) \| icon snippet (Svelte)`	`required`	React · Svelte · HTML	`{Plus} / icon snippet`	Supplies the only visible icon while label remains accessible.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`variant`	`"primary" \| "secondary" \| "ghost" \| "danger"`	`"secondary"`	React · Svelte · HTML	`"secondary"`	Selects the component's visual treatment.
`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.
`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.