Identity

Avatars, badges, pills, and status dots that label people and items.

Avatar

Avatar shows a person as a round picture. Put an AvatarImage with a src inside it, and an AvatarFallback with their initials for when the image is missing or still loading. Set the size with a size-* class.

AKMPIN

import { Avatar, AvatarFallback } from "@manta-eu/react/avatar";

<Avatar className="size-8">
  <AvatarFallback className="typography-small">AK</AvatarFallback>
</Avatar>
<Avatar>
  <AvatarFallback>MP</AvatarFallback>
</Avatar>
<Avatar className="size-14">
  <AvatarFallback>IN</AvatarFallback>
</Avatar>

Props · Storybook

Badge

Badge labels an item with a short word or number. Pick a variant for its color, such as success, warning, destructive, or info, and a size of sm, base, or lg. Put an icon next to the text as a child.

HighMediumLowDone

import { Flag } from "lucide-react";
import { Badge } from "@manta-eu/react/badge";

<Badge variant="destructive">
  <Flag />
  High
</Badge>
<Badge variant="warning">Medium</Badge>
<Badge variant="info">Low</Badge>
<Badge variant="success" size="sm">Done</Badge>

Props · Storybook

Pill

Pill shows a neutral tag, such as a project or a due date. Pass a label and an optional icon. Set rounded to square for square corners, and border={false} to drop the border. For an icon on its own, pass iconOnly and an aria-label.

Website

Due Friday

Design

import { CalendarDays, Flag } from "lucide-react";
import { Pill } from "@manta-eu/react/pill";

<Pill label="Website" />
<Pill label="Due Friday" icon={CalendarDays} />
<Pill label="Design" rounded="square" />
<Pill icon={Flag} iconOnly aria-label="Flagged" />

Props · Storybook

Status

Status pairs a colored dot with a label. Pick a variant of success, warning, error, or neutral. Set placement="right" to put the dot after the label.

Completed

Due today

Overdue

Not started

import { Status } from "@manta-eu/react/status";

<Status variant="success" label="Completed" />
<Status variant="warning" label="Due today" />
<Status variant="error" label="Overdue" />
<Status variant="neutral" label="Not started" />

Props · Storybook