Components
Overview

Components

All components are built on top of the foundation token layer. They never use hardcoded values — every visual property references a CSS custom property.

Available components

Button →

Primary interactive action element. Five variants, five sizes, loading and icon support.

ActivePendingFailed

Badge →

Status label and count indicator. Six semantic variants with optional dot indicator.

Switch →

Toggle control for binary on/off states. Fully accessible with label and description support.

Heading

Body textEyebrow label

Text →

Typography scale component. All display, heading, body, and eyebrow variants in one component.

Installing

npm install @okapidev/mitek-ui

Usage

// Import styles once at your app entry point
import '@okapidev/mitek-ui/styles';
 
// Then import individual components
import { Button, Badge, Text, Switch } from '@okapidev/mitek-ui';

Component conventions

Every component in this library follows these rules:

  1. Token-only values — no hardcoded px, rem, or hex values
  2. forwardRef support — for imperative access when needed
  3. as prop — render as a different HTML element when appropriate
  4. className passthrough — for one-off overrides
  5. ARIA compliant — keyboard navigable and screen-reader friendly
  6. CSS Modules — scoped styles, no global leakage
ShadowsButton