TypeScript

APEX Design System is built with TypeScript and provides full type definitions for all components.

Type safety

Import types alongside components for full IntelliSense support:

tsx

import { Button, type ButtonProps } from 'apex-design-system';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Prop types

All components export their prop interfaces for type checking:

tsx

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

Variant types

Use exported types for component variants:

tsx

import { type ButtonProps } from 'apex-design-system';

type ButtonVariant = NonNullable<ButtonProps['variant']>;
const variant: ButtonVariant = 'primary'; // Type-safe