Import Shape, ShapeStrokeAlignment, ShapeStrokeWidth, toSvgPathData, and type SvgViewBox from @prepared911/ui/shape. Brand path data with toSvgPathData; use type SvgPathData for branded path values.
There is no className, style, or as. Consumers may pass data-* attributes the same way as on Image.
Props
Name
Type
Default
Description
label
LocalizedMessage
—
Accessible name; renders role="img" and aria-label.
path
SvgPathData
—
Branded path data for the d attribute.
viewBox
SvgViewBox
—
User-space view box; rendered as "minX minY width height".
decorative
boolean
—
When omitted or false, the shape is meaningful and must supply label.
Marks the graphic as decorative. Renders aria-hidden="true" and focusable="false".
fill
VectorPaint
—
Fill paint. Defaults to none when omitted.
id
string
—
Element id forwarded to the svg.
ref
Ref<SVGSVGElement>
—
Ref to the root svg.
size
ShapeSize
—
Space-scale box for the root svg.
stroke
VectorPaint
—
Stroke paint. Defaults to none when omitted.
strokeAlignment
ShapeStrokeAlignment
ShapeStrokeAlignment.Center
Stroke alignment relative to the path. Inside and Outside are meaningful only for closed paths.
strokeWidth
ShapeStrokeWidth
ShapeStrokeWidth.Hairline
Stroke width in viewBox user units.
ShapeStrokeWidth
Member
Value (user units)
Hairline
1
Thin
2
Regular
3
Thick
4
ShapeStrokeAlignment
Member
Serialized value
Center
center
Inside
inside
Outside
outside
ShapeSize
Prop
Type
Description
block
SpaceOption
Block size from the space scale; omitted keeps intrinsic block size.
inline
SpaceOption
Inline size from the space scale; omitted keeps intrinsic inline size.
VectorPaint (fill, stroke)
Foreground token (except Inherit) | ChartColor | DataColor. Defaults to none when omitted.
Figma
The Shape component set in the Axon 911 Design System file maps to this component through packages/ui/src/components/shape/shape.figma.ts. The set draws a sample closed path as two layers, Fill and Stroke, and exposes Show fill, Show stroke, Stroke width, Stroke alignment and Size as component properties. Stroke alignment uses Figma's native inside, center and outside stroke placement, and size steps use the space variables. Fill and stroke paint come from each layer's Text Foreground variable mode; ChartColor and DataColor paint, path, viewBox and the accessible name are code-only. See Figma Code Connect.
Storybook
The registry links the root `Default` story. Open the `Shape/Props` and `Shape/Composition` groups in Storybook for stroke width, alignment, paint, label vs decorative, and map marker fixtures.