Button

Displays a button or a component that looks like a button.

"use client";

import { Button } from "@smartacteam/ambient-web/button";

export function ButtonDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary Button</Button>
      <Button variant="default">Default Button</Button>
    </div>
  );
}

Usage

import { Button } from "@smartacteam/ambient-web/button";

<Button variant="primary">Click Me</Button>

Examples

Sizes

"use client";

import { Button } from "@smartacteam/ambient-web/button";
import { IconArrowLeft } from "@smartacteam/ambient-web/icons/icon-arrow-left";
export function ButtonSizesDemo() {
  return (
    <div className="flex w-full flex-col gap-8">
      <div className="flex items-center gap-4">
        <Button variant="primary" size="sm">
          Small Size
        </Button>
        <Button variant="primary" size="icon-sm">
          <IconArrowLeft />
        </Button>
        <Button variant="primary" size="default">
          Default Size
        </Button>
        <Button variant="primary" size="icon">
          <IconArrowLeft />
        </Button>
        <Button variant="primary" size="lg">
          Large Size
        </Button>
        <Button variant="primary" size="icon-lg">
          <IconArrowLeft />
        </Button>
      </div>
      <div className="flex items-center gap-4">
        <Button variant="default" size="sm">
          Small Size
        </Button>
        <Button variant="default" size="icon-sm">
          <IconArrowLeft />
        </Button>
        <Button variant="default" size="default">
          Default Size
        </Button>
        <Button variant="default" size="icon">
          <IconArrowLeft />
        </Button>
        <Button variant="default" size="lg">
          Large Size
        </Button>
        <Button variant="default" size="icon-lg">
          <IconArrowLeft />
        </Button>
      </div>
    </div>
  );
}

Variants

"use client";

import { Button } from "@smartacteam/ambient-web/button";

export function ButtonVariantsDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="primary">Primary Button</Button>
      <Button variant="default">Default Button</Button>
      <Button variant="ghost">Ghost Button</Button>
      <Button variant="destructive">Text Button</Button>
      <Button variant="text">Text Button</Button>
    </div>
  );
}

API Reference

Prop	Type	Default
`variant`	`enum`	`"default"`
`size`	`enum`	`"default"`

Size-varying states

A spacing override applies to every state, including the one you were not looking at. See Styling.

import { Button } from "@smartacteam/ambient-web/button";
import { IconPlusLarge } from "@smartacteam/ambient-web/icons/icon-plus-large";
import { Input } from "@smartacteam/ambient-web/input";

/**
 * Icon-only and icon-plus-label buttons hold the same frame as each other and
 * as a text input beside them. A padding override written for one of these
 * shapes lands on the other.
 */
export function ButtonIconStatesDemo() {
  return (
    <div
      data-control-row="button-icon"
      data-row-kind="equal"
      className="flex w-full flex-wrap items-start gap-2"
    >
      <Button data-control aria-label="Add">
        <IconPlusLarge />
      </Button>
      <Button data-control>
        <IconPlusLarge />
        Add system
      </Button>
      <Input.Text data-control placeholder="Reference input" />
    </div>
  );
}