Buttons allow users to take actions and make choices with a single tap. They communicate actions that users can take and are typically placed throughout your UI.
The simplest button with default variant and size
vui provides 4 different button variants: contained (filled), outlined (border), text (minimal), and gradient (colorful gradient background)
Eye-catching gradient buttons perfect for primary CTAs. Features a smooth color transition from primary to blue to mint, with hover effects and optional glow.
Customize the color scheme to match your design system. Available colors work with all variants.
Contained
Outlined
Text
Four different sizes to fit various use cases: sm, md, lg, and xl
Combine buttons with icons for better visual communication
import { Button } from '@vui/material';| Prop | Type | Description |
|---|---|---|
variant | 'contained' | 'outlined' | 'text' | 'gradient' | The visual style variant of the buttonDefault: 'contained' |
color | 'primary' | 'secondary' | 'success' | 'error' | The color scheme of the buttonDefault: 'primary' |
size | 'sm' | 'md' | 'lg' | 'xl' | The size of the buttonDefault: 'md' |
disabled | boolean | If true, the button will be disabledDefault: false |
glow | boolean | If true, adds a glow effect to the buttonDefault: false |
isLoading | boolean | If true, shows a loading spinner and disables the buttonDefault: false |
leftIcon | React.ReactNode | Icon element to display on the left side of the button |
rightIcon | React.ReactNode | Icon element to display on the right side of the button |
fullWidth | boolean | If true, the button will take up the full width of its containerDefault: false |
disableRipple | boolean | If true, the ripple effect on click will be disabledDefault: false |
onClick | (event: React.MouseEvent) => void | Callback fired when the button is clicked |
className | string | Additional CSS classes to apply |
children | React.ReactNode | The content of the button |