Skip to content

Tile

A tile is a container that allows users to select a static option.

Examples

Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the Demo section.

Basic tile

Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties isSelected and isDisabled.

Default
Selected
Disabled

With subtext

Tile subtext can provide users with additional context. To add subtext, pass a short description to the <Tile> component.

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With icon

Icons can provide a visual cue that helps users understand what the tile is being used for. To add an icon, use the icon property.

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With stacked icon

You can further customize a tile’s appearance by placing an icon above the title. To stack your icon on top of a tile’s title, use the isStacked property.

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With large icons

You can make your icons larger to help catch a user’s attention. To increase the size of an icon, use the isDisplayLarge property.

Be aware that isDisplayLarge can only be used when isStacked is also applied.

Default
Subtext goes here
Selected
Subtext goes here
Disabled
Subtext goes here

With long subtext

To provide users with a large amount of context, subtext can be elongated to wrap around to the next line. To format a long subtext, you can pass the component Flex into <Tile>.

You can also change the type of Flex you can use so that the line breaks in the subtext fits your needs. You can do this by changing the default flex. The standard is default: “flex_1”, and changing the number in the default will also change where the sentence breaks.

Default
This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really really long subtext that goes on for so long that it has to wrap to the next line.
Selected
This is really really long subtext that goes on for so long that it has to wrap to the next line.
Disabled
Subtext goes here

Props

Tile

*required
NameTypeDefaultDescription
titlerequiredstringTitle of the tile
childrenReact.ReactNodeContent rendered inside the banner
classNamestringAdditional classes added to the banner
iconReact.ReactNodeIcon in the tile title
isDisabledbooleanFlag indicating if the tile is disabled
isDisplayLargebooleanFlag indicating if the stacked tile icon is large
isSelectedbooleanFlag indicating if the tile is selected
isStackedbooleanFlag indicating if the tile header is stacked

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines