Button

A versatile button component with multiple variants, sizes, and states.

tsx
import { Button } from '@xdev-asia/x-ui-react';

Variants

Solid (Default)

Primary action button with filled background.

Outline

Secondary action with border only.

Ghost

Subtle button with transparent background.

Glass

Glassmorphism style with blur effect.

Link

Text-only button that looks like a link.

Color Schemes

Color Variants

Available color schemes for different contexts.

Sizes

Size Variants

Different sizes for various use cases.

States

Disabled

Loading

Full Width

API Reference

PropTypeDefault
variant'solid' | 'outline' | 'ghost' | 'glass' | 'link''solid'
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
colorScheme'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral''primary'
isDisabledbooleanfalse
isLoadingbooleanfalse
fullWidthbooleanfalse
leftIconReactNode-
rightIconReactNode-
childrenReactNode-