CARDS & DECORATION

MemphisShape

Inline SVG shape primitives used as decorative accents on landing pages, hero sections, and the design system showcase. Eight variants share a 100×100 viewBox so they scale cleanly.

Import

import { MemphisShape } from 'damo-ui'

All variants

diamond

circle

triangle

zigzag

blob

wave

star

lbar

1<MemphisShape variant="diamond" />
2<MemphisShape variant="circle" />
3<MemphisShape variant="triangle" />
4<MemphisShape variant="zigzag" />
5<MemphisShape variant="blob" />
6<MemphisShape variant="wave" />
7<MemphisShape variant="star" />
8<MemphisShape variant="lbar" />

Color + size override

1<MemphisShape variant="diamond" color="var(--primary)" />
2<MemphisShape variant="star" color="var(--success)" size={48} />

Props

MemphisShape props

Prop	Type	Default	Description
variant*	'diamond' \| 'circle' \| 'triangle' \| 'zigzag' \| 'blob' \| 'wave' \| 'star' \| 'lbar'	—	Shape to render. Filled variants accept a `fill`; stroke variants accept a `stroke`.
size	number	64	Pixel size applied to both width and height of the SVG.
color	string	'var(--secondary)'	Fill (or stroke for outline variants). Accepts any CSS color string.

Accessibility

MemphisShape SVGs are rendered with aria-hidden="true" — purely decorative. If you need a meaningful shape (e.g. an icon button), use one of the components in the icon set and supply aria-label on the wrapper.

← ArticleCard Back to docs home →