{"name":"button","title":"Button","description":"Displays a button or a component that looks like a button.","installCommand":"bunx marko-ui add button -y","usageTags":"<Button>","importSnippet":"import Button from \"@/components/ui/button/button.marko\";","usageSnippet":"<Button variant=\"outline\">Button</Button>","tags":["Button"],"parts":[],"props":[{"name":"href","type":"string","required":false},{"name":"size","type":"'default' | 'sm' | 'xs' | 'lg' | 'icon' | 'icon-xs' | 'icon-sm' | 'icon-lg' | null | undefined","required":false,"default":"default"},{"name":"variant","type":"'link' | 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | null | undefined","required":false,"default":"default"}],"events":[],"keyboard":[],"accessibilityNotes":["Renders a native `<button>` by default, or a native `<a>` when `href` is passed (see `packages/shadcn/ui/button/button.marko`) — either way the element is a real interactive element, so it is keyboard-activatable with `Enter` and `Space` (`<a>`: `Enter` only, following the link) and reachable by `Tab` for free — no custom key handling or ARIA role is added.","`disabled` is the native `<button>` attribute, passed straight through via `...rest` — it removes the button from the tab order and blocks pointer and keyboard activation, matching every other native form control. The `variants.ts` styles (`disabled:pointer-events-none disabled:opacity-50`) key off that same native state rather than a separate `data-disabled` flag.","Pass `href` and `Button` renders an `<a>` with the same styling and data attributes — the Marko equivalent of shadcn's `asChild`. There is no `render`/`asChild` prop (unlike upstream Base UI's `Button`, whose polymorphic `render` prop still applies `role=\"button\"` and overrides the `<a>`'s native link semantics); the anchor keeps its native link role and keyboard behavior instead of inheriting button semantics. To style markup `Button` does not wrap, apply the `buttonVariants` helper directly to it."],"examples":[{"id":"button-default","title":"Basic","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\">Button</Button>","description":"The default button."},{"id":"button-demo","title":"Demo","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2 md:flex-row\">\n  <Button type=\"button\" variant=\"outline\">Button</Button>\n  <Button type=\"button\" variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n    <Icon name=\"ArrowUpIcon\"/>\n  </Button>\n</div>","description":"The default button, plus an icon-only variant."},{"id":"button-variants","title":"Variants","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2\">\n  <Button type=\"button\">Default</Button>\n  <Button type=\"button\" variant=\"secondary\">Secondary</Button>\n  <Button type=\"button\" variant=\"destructive\">Destructive</Button>\n  <Button type=\"button\" variant=\"outline\">Outline</Button>\n  <Button type=\"button\" variant=\"ghost\">Ghost</Button>\n  <Button type=\"button\" variant=\"link\">Link</Button>\n</div>","description":"Six visual variants, selected with the `variant` prop. They are plain class-variance-authority variants — no machine involved."},{"id":"button-outline","title":"Outline","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\" variant=\"outline\">Outline</Button>","description":"The `outline` variant."},{"id":"button-secondary","title":"Secondary","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\" variant=\"secondary\">Secondary</Button>","description":"The `secondary` variant."},{"id":"button-ghost","title":"Ghost","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\" variant=\"ghost\">Ghost</Button>","description":"The `ghost` variant."},{"id":"button-destructive","title":"Destructive","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\" variant=\"destructive\">Destructive</Button>","description":"The `destructive` variant."},{"id":"button-link","title":"Link","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button type=\"button\" variant=\"link\">Link</Button>","description":"The `link` variant."},{"id":"button-size","title":"Sizes","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2\">\n  <Button type=\"button\" size=\"sm\">Small</Button>\n  <Button type=\"button\">Default</Button>\n  <Button type=\"button\" size=\"lg\">Large</Button>\n</div>","description":"Three sizes plus an `icon` size for square icon-only buttons."},{"id":"button-icon","title":"Icon","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Button type=\"button\" variant=\"outline\" size=\"icon\" aria-label=\"Submit\">\n  <Icon name=\"ArrowUpIcon\"/>\n</Button>","description":"The `icon` size for a square, icon-only button."},{"id":"button-with-icon","title":"With Icon","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex gap-2\">\n  <Button type=\"button\" variant=\"outline\">\n    <Icon name=\"GitBranchIcon\" data-icon=\"inline-start\"/> New Branch\n  </Button>\n  <Button type=\"button\" variant=\"outline\">\n    Fork\n    <Icon name=\"GitBranchIcon\" data-icon=\"inline-end\"/>\n  </Button>\n</div>","description":"Add the `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` attribute to the icon for correct spacing."},{"id":"button-rounded","title":"Rounded","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex gap-2\">\n  <Button type=\"button\" class=\"rounded-full\">Get Started</Button>\n  <Button type=\"button\" variant=\"outline\" size=\"icon\" class=\"rounded-full\" aria-label=\"Scroll to top\">\n    <Icon name=\"ArrowUpIcon\"/>\n  </Button>\n</div>","description":"Use the `rounded-full` class to make the button rounded."},{"id":"button-spinner","title":"Spinner","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\n\n<div class=\"flex gap-2\">\n  <Button type=\"button\" variant=\"outline\" disabled>\n    <Spinner data-icon=\"inline-start\"/>\n    Generating\n  </Button>\n  <Button type=\"button\" variant=\"secondary\" disabled>\n    Downloading\n    <Spinner data-icon=\"inline-start\"/>\n  </Button>\n</div>","description":"Render a `Spinner` inside the button to show a loading state. Add `data-icon=\"inline-start\"` or `data-icon=\"inline-end\"` to the spinner for correct spacing."},{"id":"button-group-demo","title":"Button Group","source":"import ButtonGroup from \"@marko-ui/shadcn/ui/button-group/button-group.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport DropdownMenu from \"@marko-ui/shadcn/ui/dropdown-menu/dropdown-menu.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\nstatic const LABEL_ITEMS = [\n  { value: \"personal\", label: \"Personal\" },\n  { value: \"work\", label: \"Work\" },\n  { value: \"other\", label: \"Other\" },\n];\n\n<ButtonGroup>\n  <ButtonGroup class=\"hidden sm:flex\">\n    <Button type=\"button\" variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\n      <Icon name=\"ArrowLeft\"/>\n    </Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button type=\"button\" variant=\"outline\">Archive</Button>\n    <Button type=\"button\" variant=\"outline\">Report</Button>\n  </ButtonGroup>\n  <ButtonGroup>\n    <Button type=\"button\" variant=\"outline\">Snooze</Button>\n    <DropdownMenu>\n      <@trigger|triggerProps|>\n        <Button type=\"button\" variant=\"outline\" size=\"icon\" aria-label=\"More Options\" ...triggerProps>\n          <Icon name=\"MoreHorizontal\"/>\n        </Button>\n      </@trigger>\n      <@item value=\"mark-read\">\n        <Icon name=\"Mail\" data-icon=\"inline-start\"/> Mark as Read\n      </@item>\n      <@item value=\"archive\">\n        <Icon name=\"ArchiveIcon\" data-icon=\"inline-start\"/> Archive\n      </@item>\n      <@item type=\"separator\"/>\n      <@item value=\"snooze\">\n        <Icon name=\"ClockIcon\" data-icon=\"inline-start\"/> Snooze\n      </@item>\n      <@item value=\"add-calendar\">\n        <Icon name=\"Calendar\" data-icon=\"inline-start\"/> Add to Calendar\n      </@item>\n      <@item value=\"add-list\">\n        <Icon name=\"ListIcon\" data-icon=\"inline-start\"/> Add to List\n      </@item>\n      <@item type=\"sub\" label=\"Label As...\" subEntries=LABEL_ITEMS/>\n      <@item type=\"separator\"/>\n      <@item value=\"trash\" variant=\"destructive\">\n        <Icon name=\"Trash2Icon\" data-icon=\"inline-start\"/> Trash\n      </@item>\n    </DropdownMenu>\n  </ButtonGroup>\n</ButtonGroup>","description":"Use `ButtonGroup` to group related buttons together. See the Button Group documentation for more details."},{"id":"button-render","title":"As Link","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<Button href=\"#\" variant=\"secondary\" size=\"sm\">\n  Login\n</Button>","description":"Pass `href` to render an `<a>` with the same styling — the Marko equivalent of shadcn's `asChild`. The element stays a real anchor (no `role=\"button\"` override), so middle-click, \"copy link address\" and keyboard activation all behave natively. `buttonVariants` is still available when you need the classes on markup you control yourself."},{"id":"button-disabled","title":"Disabled","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2\">\n  <Button type=\"button\" disabled>Disabled</Button>\n  <Button type=\"button\" variant=\"outline\" disabled>Outline</Button>\n</div>","description":"`disabled` is a native `<button>` attribute — it passes straight through to the element."},{"id":"button-rtl","title":"RTL","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Spinner from \"@marko-ui/shadcn/ui/spinner/spinner.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div class=\"flex flex-wrap items-center gap-2 md:flex-row\" dir=\"rtl\">\n  <Button type=\"button\" variant=\"outline\">زر</Button>\n  <Button type=\"button\" variant=\"destructive\">حذف</Button>\n  <Button type=\"button\" variant=\"outline\">\n    إرسال\n    <Icon name=\"ArrowRight\" class=\"rtl:rotate-180\" data-icon=\"inline-end\"/>\n  </Button>\n  <Button type=\"button\" variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n    <Icon name=\"Plus\"/>\n  </Button>\n  <Button type=\"button\" variant=\"secondary\" disabled>\n    <Spinner data-icon=\"inline-start\"/> جاري التحميل\n  </Button>\n</div>","description":"Wrap the components in `dir=\"rtl\"` to render right-to-left. Arabic labels throughout, with the directional icon flipped via `rtl:rotate-180` — the same `dir`-wrapper pattern every RTL example on this site uses."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"button"}