Skip to contentWolf-Rayet

Tile

A tile is a rounded square that takes an asset and represents a noun.

#Sizes

Use the size that matches the row or card the tile sits in.

import { Tile } from '@wolf-rayet/react';

<Tile size="small" label="Automation">{Bolt}</Tile>
<Tile label="Automation">{Bolt}</Tile>
<Tile size="large" label="Automation">{Bolt}</Tile>

#Colour

Use colour to group tiles by the kind of thing they represent.

import { Tile } from '@wolf-rayet/react';

<Tile color="blue" label="Routing">{Bolt}</Tile>
<Tile color="green" label="Resolved">{Bolt}</Tile>
<Tile color="red" label="Escalations">{Bolt}</Tile>
<Tile color="purple" label="Bots">{Bolt}</Tile>