Button
A versatile button with 9 variants, icons, loading state, and pill shape.
Import
import { Button } from "@igorao79/uivix";Variants
Default
The primary button style
Secondary
A less prominent button
Outline
A button with only a border
Ghost
Transparent with hover effect
Destructive
For dangerous or destructive actions
Link
Renders as an inline link
Gradient
A gradient background from violet to indigo
Glow
A button with a glowing purple shadow
Soft
A soft, muted background with matching text
All Variants
Overview of all variants side-by-side
Sizes
All Sizes
Small, medium, and large
Icon Button
Square button for icons
Pill Shape
Pill Buttons
Fully rounded buttons with pill prop
With Icons
Left Icon
Icon before the text
Right Icon
Icon after the text
Both Icons
Icons on both sides
Loading State
Loading
Shows a spinner and disables the button. Click to try!
Interactive Loading
Click the button to simulate a loading state
States
Disabled
Button in disabled state
Combinations
Mixed Examples
Various combinations of variants, sizes, and features
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "link" | "gradient" | "glow" | "soft" | "default" | The visual style of the button |
| size | "sm" | "md" | "lg" | "icon" | "md" | The size of the button |
| pill | boolean | false | Make the button fully rounded (pill shape) |
| loading | boolean | false | Show a spinner and disable the button |
| leftIcon | ReactNode | - | Icon element shown before the children |
| rightIcon | ReactNode | - | Icon element shown after the children |
| disabled | boolean | false | Whether the button is disabled |
| className | string | - | Additional CSS classes to apply |