Button

The Button triggers an action.

// apps/docs/src/components/examples/button/solid/react.tsx
import { Button } from '@cloudvoyant/helical-react';

export default function ReactButtonSolid() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="success">Success</Button>
      <Button color="danger">Danger</Button>
      <Button color="warn">Warn</Button>
      <Button color="info">Info</Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/solid/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button color="primary">Primary</Button>
  <Button color="secondary">Secondary</Button>
  <Button color="success">Success</Button>
  <Button color="danger">Danger</Button>
  <Button color="warn">Warn</Button>
  <Button color="info">Info</Button>
</div>

Examples

Disabled

// apps/docs/src/components/examples/button/disabled/react.tsx
import { Button } from '@cloudvoyant/helical-react';

export default function ReactButtonDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="primary" disabled>
        Primary
      </Button>
      <Button color="secondary" disabled>
        Secondary
      </Button>
      <Button color="success" disabled>
        Success
      </Button>
      <Button color="danger" disabled>
        Danger
      </Button>
      <Button color="warn" disabled>
        Warn
      </Button>
      <Button color="info" disabled>
        Info
      </Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/disabled/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button color="primary" disabled>Primary</Button>
  <Button color="secondary" disabled>Secondary</Button>
  <Button color="success" disabled>Success</Button>
  <Button color="danger" disabled>Danger</Button>
  <Button color="warn" disabled>Warn</Button>
  <Button color="info" disabled>Info</Button>
</div>

Icon

// apps/docs/src/components/examples/button/icon/react.tsx
import { Button } from '@cloudvoyant/helical-react';
import { Plus } from 'lucide-react';

export default function ReactButtonIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="icon" className="rounded-full" aria-label="Add">
        <Plus className="size-4" />
      </Button>
      <Button size="icon" variant="outline" aria-label="Add">
        <Plus className="size-4" />
      </Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/icon/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
  import { Plus } from 'lucide-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button size="icon" class="rounded-full" aria-label="Add">
    <Plus class="size-4" />
  </Button>
  <Button size="icon" variant="outline" aria-label="Add">
    <Plus class="size-4" />
  </Button>
</div>

Outline

// apps/docs/src/components/examples/button/outline/react.tsx
import { Button } from '@cloudvoyant/helical-react';

export default function ReactButtonOutline() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" color="primary">
        Primary
      </Button>
      <Button variant="outline" color="secondary">
        Secondary
      </Button>
      <Button variant="outline" color="success">
        Success
      </Button>
      <Button variant="outline" color="danger">
        Danger
      </Button>
      <Button variant="outline" color="warn">
        Warn
      </Button>
      <Button variant="outline" color="info">
        Info
      </Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/outline/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button variant="outline" color="primary">Primary</Button>
  <Button variant="outline" color="secondary">Secondary</Button>
  <Button variant="outline" color="success">Success</Button>
  <Button variant="outline" color="danger">Danger</Button>
  <Button variant="outline" color="warn">Warn</Button>
  <Button variant="outline" color="info">Info</Button>
</div>

Rounded

// apps/docs/src/components/examples/button/rounded/react.tsx
import { Button } from '@cloudvoyant/helical-react';

export default function ReactButtonRounded() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="primary" className="rounded-full">
        Primary
      </Button>
      <Button color="secondary" className="rounded-full">
        Secondary
      </Button>
      <Button color="success" className="rounded-full">
        Success
      </Button>
      <Button color="danger" className="rounded-full">
        Danger
      </Button>
      <Button color="warn" className="rounded-full">
        Warn
      </Button>
      <Button color="info" className="rounded-full">
        Info
      </Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/rounded/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button color="primary" class="rounded-full">Primary</Button>
  <Button color="secondary" class="rounded-full">Secondary</Button>
  <Button color="success" class="rounded-full">Success</Button>
  <Button color="danger" class="rounded-full">Danger</Button>
  <Button color="warn" class="rounded-full">Warn</Button>
  <Button color="info" class="rounded-full">Info</Button>
</div>

Sizes

// apps/docs/src/components/examples/button/sizes/react.tsx
import { Button } from '@cloudvoyant/helical-react';

export default function ReactButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/sizes/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

With Icon

// apps/docs/src/components/examples/button/with-icon/react.tsx
import { Button } from '@cloudvoyant/helical-react';
import { Check, Trash2, AlertTriangle, Info, Plus, Download } from 'lucide-react';

export default function ReactButtonWithIcon() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button color="success">
        <Check className="size-4" />
        Approve
      </Button>
      <Button color="danger">
        <Trash2 className="size-4" />
        Delete
      </Button>
      <Button color="warn">
        <AlertTriangle className="size-4" />
        Warn
      </Button>
      <Button color="info">
        <Info className="size-4" />
        Info
      </Button>
      <Button>
        <Plus className="size-4" />
        Add
      </Button>
      <Button color="secondary">
        <Download className="size-4" />
        Export
      </Button>
    </div>
  );
}

<!-- apps/docs/src/components/examples/button/with-icon/svelte.svelte -->
<script lang="ts">
  import { Button } from '@cloudvoyant/helical-svelte';
  import { Check, Trash2, AlertTriangle, Info, Plus, Download } from 'lucide-svelte';
</script>

<div class="flex flex-wrap items-center gap-3">
  <Button color="success"><Check class="size-4" />Approve</Button>
  <Button color="danger"><Trash2 class="size-4" />Delete</Button>
  <Button color="warn"><AlertTriangle class="size-4" />Warn</Button>
  <Button color="info"><Info class="size-4" />Info</Button>
  <Button><Plus class="size-4" />Add</Button>
  <Button color="secondary"><Download class="size-4" />Export</Button>
</div>

API Reference

The React and Svelte components accept the same variant, color, and size props, plus standard button attributes (type, disabled, className/class).

Button

Props

Prop	Type	Default	Description
`variant`	`'solid' \| 'outline' \| 'text'`	`'solid'`	Fill style.
`color`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warn' \| 'info'`	`'primary'`	Palette color.
`size`	`'sm' \| 'md' \| 'lg' \| 'icon'`	`'md'`	Button size.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`disabled`	`boolean`	`false`	Disables the button.
`className` / `class`	`string`	—	Merged via `cn` with the variant classes.

Accessibility

Renders a native <button> element via Ark’s factory, so it gets keyboard support, focus styling, and button role announcement for free.

Keyboard support:

Space / Enter — activates the button.
Tab — moves focus to/from the button.