Reactberry

Tag

Display a small inline label for statuses, categories or counts.

Tag renders a Text as a div styled as a compact, fit-content flex row. Use it for statuses, categories or version labels. It is not marked "use client" and has no dependencies beyond Text.

v2.1.0
Stable
Beta
Deprecated

Import#

typescript
import { Tag } from "@reactberry/system/blocks";

Usage#

typescript
import { Icon, Tag } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function ReleaseTags() {
  return (
    <Box display="flex" gap="xxsmall">
      <Tag skin="surface">v2.1.0</Tag>
      <Tag skin="success">
        <Icon icon="IconCCheck" size="0.875rem" />
        Stable
      </Tag>
    </Box>
  );
}

Examples#

With an icon#

Children are laid out in a flex row with gap="xxsmall", so an Icon sits next to the label.

Verified
Private

Pass as="a" and href to render the tag as a link; shape="pill" rounds it fully.

Design systemsAccessibilityPerformance

API#

Tag#

Tag declares no props of its own (its props are typed as an open record). children is rendered inside; every other prop is spread onto the Text after these defaults:

PropTypeDefaultDescription
as
string | ComponentType
"div"

Element or component to render.

display
string
"flex"

CSS display.

alignItems
string
"center"

CSS align-items.

gap
string
"xxsmall"

Space between children.

p
string
"xs"

Padding.

py
string
"xxxs"

Vertical padding.

color
string
"secondary"

Text colour.

fontSize
string
"small"

Font size.

fontWeight
string
"600"

Font weight.

shape
string
"rounded"

Border radius shape.

width
string
"fit-content"

Width.

flex
string
"none"

CSS flex.

Accessibility#

  • Tag renders a plain div with no role. Use as="a" with href for tags that navigate.

Notes#

  • Tag is a named export (export const Tag), unlike most blocks, which are default exports re-exported by name.
  • No background is set by default; use skin or bg to give the tag a fill.
  • Props are untyped, so there is no compile-time checking of what you pass.