# PatientCard.Gender

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-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 Example [#basic-example]

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

const gender = "male" as const;

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

export default ProviderGenderDisplay;

```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/patient` API reference](/native-sdk/reference/patient).

## Component Behavior [#component-behavior]

### Gender Icons [#gender-icons]

- **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 Variants [#visual-variants]

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

## Localization [#localization]

The component uses these translation keys:

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

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- 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