Button
Displays a button or a component that looks like a button.
<div className="relative flex min-h-[344px] items-center justify-center overflow-hidden bg-white ..."> {/* Geometric background */} <div className="relative z-10 flex flex-col items-center gap-[22px] text-center"> <h2>The Foundation of SDAIA's Design System</h2> <p>Primary 'Get Started' button drives the main CTA...</p>Installation
npx sdaia-ui@latest add button
Usage
import { Button } from "@/components/ui/button"Examples
Size
Use the `size` prop to change the size of the button.
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonSize() {Default
The default button style.
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonPrimary() {Secondary
Use `style="Secondary - Solid"` for secondary actions.
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonSecondarySolid() {Outline
Use `style="Secondary - Outline"` for outlined secondary actions.
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonSecondaryOutline() {Neutral
Use variant="neutral" for high-contrast dark actions (Figma Style=Neutral).
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonNeutral() {Subtle
Use `style="Subtle"` for low-emphasis inline actions.
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonSubtle() {Transparent
Use variant="transparent" for link-style actions (Figma Style=Transparent).
'use client'; import { Button } from 'sdaia-ui'; export default function ButtonTransparent() {With Leading Icon
Remember to add `leadingIcon` to include an icon before the label.
'use client'; import { Button } from 'sdaia-ui'; function ArrowRightIcon() {Icon
Renders a button with an icon and no text label.
'use client'; import { Button } from 'sdaia-ui'; function ArrowRightIcon() {Destructive
Use destructive={true} with any style (e.g. variant="primary" destructive). Matches Figma Destructive=True.
<Button variant="primary" destructive>Delete</Button><Button variant="secondary-solid" destructive>Delete</Button><Button variant="secondary-outline" destructive>Delete</Button><Button variant="subtle" destructive>Delete</Button><Button variant="transparent" destructive>Delete</Button>API Reference
ButtonProps
Props for the Button component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | "neutral" | "primary" | "secondary-solid" | "secondary-outline" | "subtle" | "transparent" | "primary" | optional |
destructive | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
disabled | boolean | false | optional |
selected | boolean | false | optional |
iconOnly | boolean | false | optional |
leadingIcon | ReactNode | — | optional |
trailingIcon | ReactNode | — | optional |
fullWidth | boolean | false | optional |
as | ElementType | — | optional |
children | ReactNode | — | optional |