Tile

A tile groups information into an interactive element to let users browse and take action on a group of related items.

View sourceView on npmReport an issue

Anatomy

Structure

<Tile>
    <Heading /> /* (Optional) The heading of the Tile */
    <Content /> /* (Optional) The content of the Tile, but required if any other elements are present */
    <Image /> /* (Optional) The image of the Tile */
    <Illustration /> /* (Optional) The illustration of the Tile */
</Tile>

Composed Components

A Tile uses the following components:

Content

A placeholder for the main content section of a component.

Heading

A heading is a primitive component matching Hopper's typography type scale.

Illustration

An illustration compose an image with a background color. Use an illustration as an hero in a modal.

Image

An image component that can be used to display images.

Usage & Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in Orbiter.

Basic

A tile consists of minimally some content.

Image

A tile can have an image.

Or an illustration with a background color.

Selected

A tile can be selected.

Read-only

A tile can be read-only.

Disabled

A tile can be disabled.

Orientation

A tile can render horizontally.

Controlled

A tile can handle isSelected state in controlled mode.

Best Practices

Tiles are always used in groups. Similarly to Radio, they should:

  • Always have a clear label. You can use a description subtext to provide more details.
  • Be part of a group of minimally two tiles.
  • Be used to have users select one tile at once.
  • Include mutually exclusive options.
  • Be ordered in a logical way that users can understand.

Unlike Radio, it is not mandatory for Tiles to have a default option selected.

Props

id

The id of the Tile, matching the values used in TileGroup's selectedKeys prop.

isReadonly?

Whether or not the Tile is read-only.

orientation?

The axis the Tile should align with.

Defaults to 'vertical'.
style?

The inline style for the element. A function may be provided to compute the style based on component state.

children?

The children of the component. A function may be provided to alter the children based on component state.

isSelected?

Whether the element should be selected (controlled).

defaultSelected?

Whether the element should be selected (uncontrolled).

isDisabled?

Whether the button is disabled.

autoFocus?

Whether the element should receive focus on render.

className?

The CSS className for the element. A function may be provided to compute the class based on component state.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • checked has been renamed isSelected.
  • defaultChecked has been renamed defaultSelected.
  • value has been removed, use the id instead.