Button
Displays a button or a component that looks like a button.
Usage
import { Button } from "@smartacteam/ambient-web/button";<Button variant="primary">Click Me</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>
);
}"use client";
import { Button } from "@smartacteam/ambient-web/button";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
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">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
<Button variant="primary" size="default">
Default Size
</Button>
<Button variant="primary" size="icon">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
<Button variant="primary" size="lg">
Large Size
</Button>
<Button variant="primary" size="icon-lg">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
</div>
<div className="flex items-center gap-4">
<Button variant="default" size="sm">
Small Size
</Button>
<Button variant="default" size="icon-sm">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
<Button variant="default" size="default">
Default Size
</Button>
<Button variant="default" size="icon">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
<Button variant="default" size="lg">
Large Size
</Button>
<Button variant="default" size="icon-lg">
<CentralIcon
name="IconArrowLeft"
radius="2"
stroke="1.5"
fill="outlined"
/>
</Button>
</div>
</div>
);
}"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>
);
}