Emblem

Atom
A tinted rounded square (or circle) that holds a single Icon or a short monogram, the recurring "icon on a soft background" used in cards, media objects, empty states, and feeds. Emblem owns the surface and the icon color: pick a tone and it tints the square and paints the glyph to match, so a call site never hand-composes borderRadius + backgroundColor to build an icon background.
src/atoms/emblem
View in Foundations

Playground

Every control sets a real prop of EmblemProps. The JSX below updates as you go.
CV
Props
children
string
Tone
pick one
Size
pick one
circle
boolean
JSX · EmblemProps
<Emblem primary><Typography>CV</Typography></Emblem>

Variants

4 examples from src/atoms/emblem/emblem.md, each rendered live from its own JSX.
Tones
<Row snug>
<Emblem primary><Icon shield /></Emblem>
<Emblem success><Icon check /></Emblem>
<Emblem warning><Icon circleAlert /></Emblem>
<Emblem destructive><Icon trash /></Emblem>
<Emblem muted><Icon bell /></Emblem>
</Row>
Sizes
<Row snug alignCenter>
<Emblem small><Icon bell /></Emblem>
<Emblem><Icon bell /></Emblem>
<Emblem large><Icon bell /></Emblem>
</Row>
U
Monogram
<Emblem label="U" />
Circle
<Emblem circle>
<Icon check />
</Emblem>

Sizes

CV
small
CV
default
CV
large

Anatomy

CV
1
Tile
2
Monogram
Dimmed parts appear only in some states or variants.

Props

15 props on EmblemProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
children
ReactNode
–
A single <Icon /> element; Emblem tints it to match the tone.
label
string
–
A monogram letter (or two) instead of an icon, painted in the tone color.
Tone
pick one
7 props
primary
boolean
false
destructive
boolean
false
success
boolean
false
warning
boolean
false
cyan
boolean
false
The fixed cyan hue (the hand-off's --cyan, the chart-2 series): its wash and ring mixed from it, the glyph in the hue's ink, solved to 4.5:1 per scheme (Typography's cyan).
secondary
boolean
false
The solid neutral tile: the secondary fill inside the border hairline, the glyph in the second ink (muted-foreground), with no lit top edge (the hand-off's neutral tile).
muted
boolean
false
Size
pick one
6 props
small
boolean
false
large
boolean
false
circle
boolean
false
Circle instead of the default rounded square.
soft
boolean
false
The plain soft tile: the tone's own soft wash (primary-soft, destructive-soft, ...) with no ring and no lit top edge, at the soft tile's own corner. The tone tile a dialog draws over its title (the v4 hand-off's AlertDialog renderer, --ion-soft / --bad-soft). Composes with the tone and size axes.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
For layout composition only (not styling): the tint, radius, and size come from props.

Accessibility and keyboard

Keyboard
Not focusable. It has no interaction of its own and takes the semantics of what it wraps.
Semantics
No role of its own in source; it reads as the content it renders.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Emblem>
<Icon shield />
</Emblem>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--f-dp
--fd
--ft
--hl
--ion

Related components