# Button > The action button, with five variants, five sizes and a built-in loading state. Wraps Base UI Button. Source: https://docs.nasaqui.com/components/button ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/button.json ``` The one control for "do something". It wraps Base UI's `Button` and adds Nasaq's variants, sizes and a `loading` state that shows a spinner, sets `aria-busy` and blocks clicks while the button stays focusable. `buttonVariants` is exported so a link or another element can look like a button. ## When to use - Any action the user triggers: save, delete, open a dialog, submit a form. - An icon-only action (`size="icon"` / `"icon-sm"`) with an `aria-label`. - An inline text-style action (`variant="link"`). ## When not to use - Navigation to another page: render a link styled with `buttonVariants`, or use a sidebar item in [`AppShell`](https://docs.nasaqui.com/components/app-shell). - A list of related actions: use [`DropdownMenu`](https://docs.nasaqui.com/components/dropdown-menu). - A two-state setting: use [`Switch`](https://docs.nasaqui.com/components/switch). ## Import ```tsx import { Button, buttonVariants, type ButtonProps } from "@fadymondy/nasaq/web"; // inside this monorepo: "@nasaq/web" ``` ## Quick start ```tsx import { Button } from "@fadymondy/nasaq/web"; export function SaveBar() { return (
); } ``` ## Anatomy ``` Button data-slot="button" (renders a ); } ``` ### Loading on submit ```tsx import { Button } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function SubmitButton() { const [saving, setSaving] = useState(false); return ( ); } ``` ### Icon-only with a tooltip ```tsx import { Button, Tooltip } from "@fadymondy/nasaq/web"; import { Plus } from "lucide-react"; export function AddButton() { return ( ); } ``` ## Accessibility Base UI renders a native ` ); } ``` ### shadcn ```tsx import { Button } from "@/components/ui/button"; export function SaveBar() { return (
); } ``` ### Vue ```vue ``` ### Blade ```blade
Cancel Save changes Track order
``` ### HTML + Alpine ```html
```