Shape

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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.

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.

DefaultOpens in a new tab

Shape / Usage

Shape / Accessibility

On this page

VectorPaint (fill, stroke)

Storybook

Shape

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

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.

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.

DefaultOpens in a new tab

Shape / Usage

Shape / Accessibility

On this page

VectorPaint (fill, stroke)

Storybook