Import Shape, ShapeStrokeAlignment, ShapeStrokeLinecap, ShapeStrokeLinejoin, ShapeStrokeWidth, toSvgPathData, and types ShapeLayer and 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.
layers
readonly ShapeLayer[]
—
Extra paths drawn above the base path, in order, each with its own paint.
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.
strokeLinecap
ShapeStrokeLinecap
ShapeStrokeLinecap.Butt
Stroke end style of the base path.
strokeLinejoin
ShapeStrokeLinejoin
ShapeStrokeLinejoin.Miter
Stroke corner style of the base path.
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
ShapeStrokeLinecap
Member
Serialized value
Butt
butt
Round
round
Square
square
ShapeStrokeLinejoin
Member
Serialized value
Miter
miter
Round
round
Bevel
bevel
ShapeLayer (layers)
Prop
Type
Description
path
SvgPathData
Branded path data for the layer.
fill
VectorPaint
Fill paint; none when omitted.
stroke
VectorPaint
Stroke paint; none when omitted.
strokeWidth
ShapeStrokeWidth
Stroke width in user units. Defaults to Hairline.
strokeLinecap
ShapeStrokeLinecap
Stroke end style. Defaults to Butt.
strokeLinejoin
ShapeStrokeLinejoin
Stroke corner style. Defaults to Miter.
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.