Button

Basic usage

Clicking triggers the handler passed via onClick$.

tsx

<Button onClick$={$(() => { alert("Button clicked"); })}>Click me</Button>

Variants (Style)

Prop variant: contained (default), outline, text.

tsx

<div class="flex flex-wrap gap-2">
  <Button variant="contained">Contained</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="text">Text</Button>
</div>

Intents (Colors)

Prop intent: primary (default), secondary, danger. Also works as a legacy variant.

tsx

<div class="flex flex-wrap gap-2">
  <Button intent="primary">Primary</Button>
  <Button intent="secondary">Secondary</Button>
  <Button intent="danger">Danger</Button>
</div>

Combinations

tsx

<div class="flex flex-wrap gap-2">
  <Button variant="outline" intent="danger">Outline Danger</Button>
  <Button variant="text" intent="primary">Text Primary</Button>
</div>

Sizes

Prop size: sm, md (default), lg.

tsx

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

Disabled

Prop disabled disables interaction and reduces opacity.

tsx

<div class="flex flex-wrap gap-2">
  <Button>Enabled</Button>
  <Button disabled>Disabled</Button>
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/button/meta.generated.json not found or path not allowed.