Button

npx shadcn@latest add https://ui.saasflare.io/r/button.json

pnpm add @saasflare/ui

"use client"import { Button, MagnifyingGlassIcon } from "@saasflare/ui"/** * `isIconOnly` maps each size to its square icon counterpart. Icon-only buttons * need an accessible name, so an `aria-label` is required. The last button shows * `isIconOnly` + `isLoading`, where the spinner replaces the icon. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button isIconOnly size="xs" variant="ghost" aria-label="Search">                <MagnifyingGlassIcon aria-hidden />            </Button>            <Button isIconOnly size="sm" variant="soft" aria-label="Search">                <MagnifyingGlassIcon aria-hidden />            </Button>            <Button isIconOnly size="md" variant="outline" aria-label="Search">                <MagnifyingGlassIcon aria-hidden />            </Button>            <Button isIconOnly size="lg" variant="solid" aria-label="Search">                <MagnifyingGlassIcon aria-hidden />            </Button>            <Button isIconOnly size="md" isLoading aria-label="Searching">                <MagnifyingGlassIcon aria-hidden />            </Button>        </div>    )}

"use client"import { Button, ArrowLeftIcon, ArrowRightIcon } from "@saasflare/ui"/** Leading + trailing icons via `startContent` / `endContent`, across variants. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button variant="solid" endContent={<ArrowRightIcon aria-hidden />}>                Continue            </Button>            <Button variant="outline" startContent={<ArrowLeftIcon aria-hidden />}>                Go back            </Button>            <Button                variant="ghost"                startContent={<ArrowLeftIcon aria-hidden />}                endContent={<ArrowRightIcon aria-hidden />}            >                Navigate            </Button>        </div>    )}

"use client"import { Button } from "@saasflare/ui"/** Semantic color intents, applied across any variant. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button intent="primary">Primary</Button>            <Button intent="neutral">Neutral</Button>            <Button intent="success">Success</Button>            <Button intent="warning">Warning</Button>            <Button intent="danger">Danger</Button>            <Button intent="info">Info</Button>        </div>    )}

"use client"import { Button, ArrowRightIcon } from "@saasflare/ui"/** * `isLoading` swaps in a spinner, forces `disabled` + `aria-busy`, and stops * hover motion. `spinnerPlacement` picks the side; the opposite slot keeps its * content. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button isLoading>Saving…</Button>            <Button isLoading spinnerPlacement="end">                Saving…            </Button>            <Button                isLoading                spinnerPlacement="start"                endContent={<ArrowRightIcon aria-hidden />}            >                Next            </Button>        </div>    )}

"use client"import { Button } from "@saasflare/ui"/** The `size` axis, from `xs` to `xl`. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button size="xs">Extra small</Button>            <Button size="sm">Small</Button>            <Button size="md">Medium</Button>            <Button size="lg">Large</Button>            <Button size="xl">Extra large</Button>        </div>    )}

"use client"import { Button } from "@saasflare/ui"/** Button visual treatments — the `variant` axis. */export function Demo() {    return (        <div className="flex flex-wrap items-center gap-3">            <Button variant="solid">Solid</Button>            <Button variant="soft">Soft</Button>            <Button variant="outline">Outline</Button>            <Button variant="ghost">Ghost</Button>            <Button variant="link">Link</Button>            <Button variant="glass">Glass</Button>        </div>    )}