API and Development
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.
| 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. |
| Member | Value (user units) |
|---|---|
Hairline | 1 |
Thin | 2 |
Regular | 3 |
Thick | 4 |
| Member | Serialized value |
|---|---|
Center | center |
Inside | inside |
Outside | outside |
| 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. |
Foreground token (except Inherit) | ChartColor | DataColor. Defaults to none when omitted.
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.