Balance Logo
Reckon Design System
Open playroom


Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.
pnpm add @balance-web/tile
Import usage
import {
} from '@balance-web/tile';
  • Code
  • API


  • Card — Highly flexible component for displaying a subject with its related information and can have multiple interactions.


The Tile component can be used by itself or inside a TileStack. Content is passed to the tile as children.

The tile component does not have an opinion on how text is rendered, it is the consumers responsibility.

Edit in Playroom

A tile will fill the container it's in so it's the consumer's responsibility to allocate containers with approriate widths and heights.


The interactivity of a tile depends on whether it's displaying contextual information or acting as an entry point for a more detailed interaction.

By default tiles are not interactive. The onClick or href props can be used to make them behave interactively.


When a tile is interactive, the entire tile surface responsds to hover/active events. In addition to that, the Tile.InteractiveText primitive can be used inside the tile to responsd to these events.

<Tile.InteractiveText>Interactive text</Tile.InteractiveText>

For convenience, the InteractiveText component takes all the props a normal Text component does. See below examples on how to compose a tile using InteractiveText.


The onClick prop makes the entire tile surface a clickable target.


The href prop makes the entire tile surface a clickable target.

A link tile supports all the usual anchor props. For example the target prop:

A tile can either be clickable or be a link, not both.


The density of a tile is defined as the white space between the border and the content area. It's set through the density prop and supports three values: compact, regular, spacious.

The default density of a tile is regular.

All tiles in a stack should have the same density.

Tile stack

A group of related tiles can be renderred together inside a TileStack.

Interactive tiles can also be used in a TileStack.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo