# Contact Item

> A person with their avatar, name and one line of context, such as an email or when they were last active. The contact card adds one action: a menu of actions, a radio to pick them, or a link.

Source: https://ritla.app/ui/contact-item

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add contact-item
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/contact-item
```

## Usage

```tsx
import { ContactItem, ContactCard } from "@/components/ui/contact-item";

<ContactItem name="Layla Amiriah" supportingText="Active now" status="online" />
<ContactCard href="/contacts/layla" name="Layla Amiriah" supportingText="layla@kanz.example" action="View" />
```

## Examples

### Cards with one action

An icon button opening a menu, named for whose actions they are (“More actions for Layla”). The View card is one link, so the whole card opens the contact.

Live preview: https://ritla.app/_kanz/preview/ltr/contact-item-cards

### Pick a recipient

`ContactRadioCard` inside a `RadioGroup`: the whole card labels the radio, which is named by the name and status and described by the supporting line.

Live preview: https://ritla.app/_kanz/preview/ltr/contact-item-picker

### Emails and phones stay left to right

The supporting line takes its direction from its text. An email sets it by itself; a phone number has no letters, so put it in `<bdi dir="ltr">`.

Live preview: https://ritla.app/_kanz/preview/ltr/contact-item-ltr-details

## API reference

### `ContactItem`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | None | Figma's Name: the name people know, in the script the person wrote it in. |
| `supportingText` | `ReactNode` | None | Figma's Supporting text: one useful line, such as an email, a role or the last active time. |
| `src` | `string` | None | The person's photo. Without one, their initials show. |
| `status` | `"none" \| "online" \| "away" \| "offline" \| "verified"` | `"none"` | Figma's Status: a dot or badge on the avatar, read as a word after the name. |
| `size` | `"md" \| "lg"` | `"lg"` | Figma's Size: a 40 or 48px avatar. |

### `ContactCard`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `action` | `ReactNode` | None | Figma's Action Type: an icon button (Icon Button) or a short word (Text), styled for you when it is a string. |
| `href` | `string` | None | Makes the whole card one link that opens the contact. |
| `render` | `ReactElement` | None | A router link (`<Link>`) with the card's look. |
| `…` | `ContactItem props` | None | Every `ContactItem` prop. |

### `ContactRadioCard`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | None | This person's value in the `RadioGroup`. |
| `disabled` | `boolean` | None | Can't be picked; the texts take the disabled color. |
| `…` | `ContactItem props` | None | Every `ContactItem` prop. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: To a linked card, the action button, or the radio group.
- `Enter`: Opens the contact or the actions menu.
- `ArrowDown` + `ArrowUp`: Between people in a radio group, selecting the one reached.

ARIA:

- The avatar is decorative because the name is visible next to it, so the name isn't read twice.
- The status is a word read after the name (“Layla Amiriah, Online”), never the colored dot alone.
- The action button has its own name that says who it is for (“More actions for Layla”).
- In a radio card, the name and status name the radio, and the supporting line describes it.

## Arabic and RTL notes

Mirrors:

- The avatar and name start on the right; the action sits at the end, on the left.
- The status dot and verified badge move to the avatar's bottom-left corner.

Does not mirror:

- Emails, phone numbers and account numbers in the supporting line stay left to right.
- The three-dot icon and the verified badge.

Numerals: Numbers in the text are as you pass them; format times and counts with `formatNumber`, and leave phone and account numbers as written.

Arabic typography: Name `body-18` Semibold and line `body-14` at lg; `body-14` and `body-12` at md. Texts wrap rather than clip, so a longer Arabic name stays whole.

Mixed-direction text: The name and the supporting line are each isolated with `dir="auto"`; a phone number needs `<bdi dir="ltr">`.