Complete API reference for Atomix React components and hooks
Interactive button component with multiple variants and states.
interface ButtonProps {
variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'ghost' | 'outline-primary' | 'outline-secondary';
size?: 'sm' | 'md' | 'lg';
disabled?: boolean;
loading?: boolean;
type?: 'button' | 'submit' | 'reset';
children: React.ReactNode;
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
className?: string;
[key: string]: any;
}
// Usage
<Button variant="primary" size="lg" onClick={handleClick}>
Click me
</Button>Small status indicators and labels.
interface BadgeProps {
variant?: 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
size?: 'sm' | 'md' | 'lg';
children: React.ReactNode;
className?: string;
}
// Usage
<Badge variant="success">New</Badge>Icon wrapper component with consistent sizing.
interface IconProps {
name: string;
size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
className?: string;
}
// Usage
<Icon name="Check" size="lg" />Responsive container component for centering content.
interface ContainerProps {
fluid?: boolean;
maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
children: React.ReactNode;
className?: string;
}
// Usage
<Container maxWidth="lg">
Content
</Container>Flexible grid system with responsive columns.
interface GridProps {
gutter?: number;
justify?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
align?: 'top' | 'middle' | 'bottom' | 'stretch' | 'baseline';
children: React.ReactNode;
className?: string;
}
interface GridColProps {
span?: number;
offset?: number;
order?: number;
xs?: number | 'auto';
sm?: number | 'auto';
md?: number | 'auto';
lg?: number | 'auto';
xl?: number | 'auto';
xxl?: number | 'auto';
children: React.ReactNode;
className?: string;
}
// Usage
<Grid gutter={16}>
<GridCol md={6} lg={4}>
Content
</GridCol>
</Grid>Hook for managing theme state and preferences.
interface ThemeHook {
theme: 'light' | 'dark' | 'high-contrast';
setTheme: (theme: 'light' | 'dark' | 'high-contrast') => void;
systemTheme: 'light' | 'dark';
}
// Usage
const { theme, setTheme } = useTheme();Hook for responsive breakpoints and device detection.
interface ResponsiveHook {
isMobile: boolean;
isTablet: boolean;
isDesktop: boolean;
breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
}
// Usage
const { isMobile, breakpoint } = useResponsive();type ColorVariant =
'primary' | 'secondary' | 'success' |
'error' | 'warning' | 'info';
type SizeVariant = 'sm' | 'md' | 'lg';
type Breakpoint =
'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
type Theme = 'light' | 'dark' | 'high-contrast';interface ClassNameProps {
className?: string;
}
interface ChildrenProps {
children: React.ReactNode;
}
type PolymorphicProps<E extends React.ElementType> = {
as?: E;
} & React.ComponentPropsWithoutRef<E>;