PatientCard.Gender

A visual gender indicator component with icon support and themed styling. Provides accessible gender display for healthcare applications with localization support and multiple visual variants.

Basic ExampleCopy Anchor Link

import { PatientCard } from "@ovok/native";
import * as React from "react";

const gender = "male" as const;

const ProviderGenderDisplay = () => <PatientCard.Gender gender={gender} />;

export default ProviderGenderDisplay;

PropsCopy Anchor Link

Every prop, with its type and description, is listed in the @ovok/native/patient API reference.

Component BehaviorCopy Anchor Link

Gender IconsCopy Anchor Link

• Male: ♂ symbol with blue color theme (#2196F3)
• Female: ♀ symbol with pink color theme (#E91E63)
• Other: ⚲ symbol with purple color theme (#9C27B0)
• Missing: Returns null when gender is absent; the public type does not include an unknown value

Visual VariantsCopy Anchor Link

• Chip: Bordered container with background color and rounded corners
• Default: Simple inline display with icon and text

LocalizationCopy Anchor Link

The component uses these translation keys:

{
  "gender": {
    "male": "Male",
    "female": "Female",
    "other": "Other"
  }
}

StylingCopy Anchor Link

Theme Colors UsedCopy Anchor Link

• Gender-specific colors for icons and backgrounds
• theme.spacing(1) - Gap between icon and text (4px default)
• theme.spacing(3) - Chip horizontal padding (12px default)
• theme.borderRadius(3) - Chip corner radius (12px default)
• theme.fonts.labelMedium - Chip text typography
• theme.fonts.bodyMedium - Default variant typography