║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Button description: A versatile button component with multiple variants and sizes.

<ComponentPreview name="button-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/button

npx shadcn@latest add @roiui/button-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/button

pnpm dlx shadcn@latest add @roiui/button-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="button" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={<Button></Button>} />

Examples

Secondary

<ComponentPreview name="button-secondary" />

Destructive

<ComponentPreview name="button-destructive" />

Outline

<ComponentPreview name="button-outline" />

Ghost

<ComponentPreview name="button-ghost" />

Disabled

<ComponentPreview name="button-disabled" />

Loading

<ComponentPreview name="button-loading" />

External Link

<ComponentPreview name="button-external-link" />

With Stripe Styled Arrow

<ComponentPreview name="button-with-arrow" />

Props

<PropTable data={[ { prop: "variant", type: '"primary" | "secondary" | "destructive" | "ghost" | "icon" | "outline" | "link"', default: '"primary"', description: "The visual style variant of the button", }, { prop: "size", type: '"sm" | "md" | "lg"', default: '"md"', description: "The size of the button", }, { prop: "render", type: "ReactElement", description: "Custom element to render the button as (e.g., Link, anchor tag). Enables polymorphic behavior.", }, { prop: "showArrow", type: "boolean", default: "false", description: "Whether to show an arrow indicator next to the button content", }, { prop: "pointLeft", type: "boolean", default: "false", description: "When showArrow is true, controls if the arrow points left instead of right", }, { prop: "pointExternal", type: "boolean", default: "false", description: "When showArrow is true, applies external link arrow styling (diagonal orientation)", }, { prop: "loading", type: "boolean", default: "false", description: "Shows a spinner on the left side and disables the button when true", }, { prop: "className", type: "string", description: "Additional CSS classes to apply to the button", }, { prop: "children", type: "ReactNode", description: "The content to display inside the button", }, { prop: "disabled", type: "boolean", default: "false", description: "Whether the button is disabled and non-interactive", }, { prop: "onClick", type: "function", description: "Function to call when the button is clicked", }, { prop: "type", type: '"button" | "submit" | "reset"', default: '"button"', description: "The type attribute of the button element", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║