Mobile Components Overview | Enara Design System

Atoms

Basic building blocks of the design system. These are the smallest, most fundamental components that cannot be broken down further.

User avatar with auto-generated colors from name, initials, and image support with fallback.

Status indicator with semantic colors for labels, tags, and status information.

Interactive button with multiple variants, sizes, and states for actions and navigation.

Container for grouping content with elevation, padding, and interactive states.

Form control for selecting one or more options, with indeterminate state support.

Compact element for displaying status, categories, tags, or attributes.

Horizontal or vertical separator line for visually dividing content sections.

Wrapper for form controls providing consistent labels, helper text, and errors.

Icon-only button for compact actions in toolbars, headers, and dense UIs.

Text input with support for states, icons, and built-in clear/password toggle.

Radio button for single-select options within a group.

Dropdown select for choosing from a list of options with labels and error states.

Loading indicator for communicating ongoing processes and async operations.

Toggle control for binary on/off states, commonly used for settings.

Navigation component for switching between different views or sections.

Typography component for rendering text with consistent styling across the design system.

Import components from @enara-health/ui-react-native:

import { Button } from '@enara-health/ui-react-native';