Explore 52 reusable components and design tokens that make up the Praxia design language. Each component includes interactive examples, documentation, and usage guidelines.
Design Tokens Components
Basic Components
Action Buttons
Action buttons component with configurable buttons and actions for page-level controls
Alert
Contextual notification component with multiple variants for communicating important information
Avatar
User representation component with image and initials fallback, supporting multiple sizes for various contexts
Badge
Versatile badge component with 11 color variants and 3 sizes for status indicators, labels, and categorization
Button
Interactive buttons with variants, sizes, and loading states
Modal
Accessible dialog component with focus trap, keyboard navigation, and multiple variants for confirmations
Notification Item
Flexible notification component supporting various states, user avatars, badges, and interactive elements for activity feeds and alert systems
Notification Panel
Complete notification panel component with header, scrollable notification list, loading states, empty states, and optional footer links for activity feeds and notification centers
Popover
Contextual overlay component with flexible content positioning, keyboard navigation, and multiple variants for information display
Progress Bar
Progress indicator with consistent 8px height and Genentech blue styling for loading and completion states
Basic Teaser Card
Teaser cards with optional descriptions for content promotion
Divider
Simple horizontal divider for content separation
Empty State
Component for displaying empty state messages when sections have no content
Dropdown
Dropdown component for menu selections and interactive navigation elements
Dropdown List
Responsive dropdown list component with links and avatars variants
Gene Icon
Dynamic SVG icons exported from Figma
Icon Card
Empty state component with icon, title, and optional description for displaying placeholder content
List
Flexible list component supporting unordered, ordered, and icon lists with three nesting levels
Listing Card
Content listings with optional navigation, badges, and descriptions
Scroll
Custom scrollbar styling that follows the Praxia Design System with consistent colors, hover states, and responsive behavior across all browsers
Section Header
Section headers with optional edit functionality for both buttons and links
Tab
Generic tab navigation with accessible behavior and flexible content panels
Tag
Versatile tag component supporting text, avatars, icons, and removable functionality across three sizes
Toast
Notification messages with success, error, and info variants
User Card
User profile cards with interactive variants and confirmation modal
Competency List
Component for displaying lists of competencies and skills with organized layout
Confirmation Modal
Modal dialog component for confirmation actions with customizable messaging
Lesson Card
Content acknowledgement card for high-importance organizational content with engagement tracking and compliance features
Link
Navigation links with primary and secondary variants, supporting internal routing, external links, and icon integration
Project Card
Interactive card component for displaying project information with status badges, metadata, and navigation capabilities
Form Components
Form
Form wrapper component with comprehensive styling for all form elements including inputs, selects, textareas, checkboxes, radio buttons, and helper elements
Form Fieldset
Semantic form grouping component using fieldset and legend elements for better accessibility and visual organization of related form fields
Form Inputs
Input field components with multiple types, sizes, and states for text entry, email, password, and other input types
Form Selects
Select dropdown components with multiple sizes and states supporting single selection with custom styling
Form Textareas
Multi-line textarea components with character counting, validation, resizing, and accessibility features
Form Checkboxes
Checkbox form components with multiple sizes and states supporting checked, indeterminate, error, and disabled states
Form Radio Buttons
Radio button form components with multiple sizes and states supporting single-choice selections with mutual exclusivity
Search Input
Flexible search input combining Form styles with Button component, available in three sizes for various search contexts
Slider
Numeric input slider with dual interaction methods supporting touch/mouse dragging and precise numeric input for value selection
Stylized Multiselect
Advanced multiselect component with search functionality, green/blue variants, and comprehensive accessibility features for multi-option selection
Layout Components
Header
Configurable navigation header with responsive mobile drawer
Page Title
Page header component with H1 title and primary action button - responsive typography and flexible button options
Profile Header
User profile header component with avatar, name, role, and optional action button - responsive layout with three viewport breakpoints