Button

import { Button } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
variant	"default" | "primary" | "secondary" | "destructive" | "warning" | "info" | "success" | "outline" | "outline_muted" | "plain" | "ghost" | "smooth" | "smooth_destructive" | "solid_smooth" | "solid_smooth_destructive"	"primary"	Visual style of the button.
size	"default" | "sm" | "md" | "lg" | "icon"	"default"	Size of the button.
rounded	"sm" | "md" | "lg" | "xl" | "full"	"lg"	Border radius of the button.
shadow	"sm" | "md" | "lg" | "xl"	—	Shadow depth of the button.
fullWidth	boolean	false	If true, the button will take the full width of its container.
asChild	boolean	false	If true, renders the button as a child component using Radix UI's Slot.
...props	React.ButtonHTMLAttributes<HTMLButtonElement>	—	Any other standard button props.
badge	ReactNode (optional)	—	Displays a badge or notification dot on the button. Can be any React node, e.g., a number, icon, or small element.
badgeClassName	string (optional)	—	Additional classes applied to the badge element for custom styling.
wrapperClassName	string (optional)	—	Additional classes applied to the wrapper element for custom styling.
loading	boolean	false	If true, the button will show a loading spinner.

---

Variants

Variant

Value	Preview
default	Neutral background with default text color.
primary	Primary background and foreground color.
secondary	Secondary background and foreground color.
destructive	Red destructive background and foreground.
warning	Yellow warning background.
info	Blue informational background.
success	Green success background.
outline	Transparent background with border.
outline_muted	Transparent background with muted border.
plain	Transparent background, colored text.
ghost	Transparent background, subtle text.
smooth	Low-opacity background, hover effect.
smooth_destructive	Low-opacity red background.
solid_smooth	Solid but soft background color.
solid_smooth_destructive	Solid but soft red background.

---

Size

Value	Height / Padding
default	h-10, medium padding.
sm	h-[38px], smaller text & padding.
md	h-12, medium size.
lg	h-14, larger text & padding.
icon	h-10 w-10, square icon button.

---

Rounded

Value	Radius Class
sm	rounded
md	rounded-md
lg	rounded-lg
xl	rounded-xl
full	rounded-full

---

Shadow

Value	Tailwind Class
sm	shadow
md	shadow-md
lg	shadow-lg
xl	shadow-xl

---

Usage Examples

Basic Button

<Button>Click Me</Button>

Primary Large Button

<Button variant="primary" size="lg">
  Submit
</Button>

Full Width Button

<Button fullWidth>Continue</Button>

Icon Button

<Button size="icon">
  <Icon name="search" />
</Button>

Button with Shadow & Rounded

<Button shadow="lg" rounded="full">
  Rounded Shadow
</Button>

Button with Badge

<Button badge={<CustomIcon />}>Rounded Shadow</Button>

AsChild Example

<Button asChild>
  <a href="/profile">Go to Profile</a>
</Button>

Loading Button

<Button loading>Click Me</Button>

---

Accessibility

• Always provide a clear label for buttons.
• Use aria-label for icon-only buttons.
• Disabled state prevents interaction and applies reduced opacity.

---