Hanzo GUI

Shapes

Easy to use Square and Circle

  • Accepts size props as number or token value.
  • Sets min and max width and height.

Installation

Shapes is already installed in @hanzo/gui, or you can install it independently:

npm install @hanzogui/shapes

Usage

Hanzo GUI supports sizing shapes using your size tokens, or plain numbers.

import { Circle, Square } from '@hanzo/gui'

export default () => (
  <>
    <Square size="$4" />
    <Square size={100} />
    <Circle size="$4" />
    <Circle size={100} />
  </>
)

API Reference

Square

Square extends Stack views inheriting all the Gui standard props, plus:

PropTypeDefaultRequired
sizestring | tokens.size--
circularboolean--

Circle

Circle extends Square, setting circular to true.

Last updated on

On this page