Zest Design System Components

Core Principles

Always use Zest components instead of custom implementations. Zest provides pre-built, accessible components with consistent styling, behavior, and theme integration. Creating custom components duplicates work and breaks design consistency.

Always provide testID for all interactive components. testID enables reliable UI testing with @testing-library/react-native. Every button, input, card, and interactive element requires a unique testID.

Always provide altText for icons for accessibility. Icons need descriptive alt text for screen readers. Without altText, visually impaired users cannot understand icon meaning.

Use correct component variants for semantic meaning. Button variants (primary/secondary/text), Card variants (static/navigational/selectable), and InlineMessage variants (success/error/warning/info) provide semantic meaning and consistent styling.

Why: Zest components ensure design consistency, built-in accessibility, automatic theme support, and reduce custom code maintenance.

When to Use This Skill

Use these patterns when: