Shapes

Simple geometric shape components for creating circular and square UI elements.

Circle

Square

Usage

import { Circle, Square } from '@styled-system/jsx'

<Circle className={css({ size: '100px', bg: 'fill.accent' })}>
  Circle Content
</Circle>
 
<Square className={css({ size: '100px', bg: 'fill.secondary' })}>
  Square Content
</Square>

Properties

Both Circle and Square components accept the following properties:

Name	Type	Default	Description
`size`	`string \| number`	-	Sets both width and height to the same value

Additionally, they accept all common layout properties through the className prop or with css function.