Avala Design
← Components/primitives

Tile

Carbon-spec Tile. Five variants: Tile — base, non-interactive ClickableTile — entire tile is a button / link, hover affordance SelectableTile — checkbox-like tile, aria-pressed for state ExpandableTile — accordion-like tile with show-more affordance RadioTile — radio-group option styled as a tile

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Tile } from "@avala/design";

<Tile>Tile</Tile>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-tile--defaultOpen in Storybook →

When to use

  • Content blocks the user clicks, selects, or expands — Mission Control kanban tiles, dataset cards, plan-pricing options.
  • Carbon's recommended primitive for content-block UI in product surfaces.

When not to use

  • Generic informational containers without interactivity → use `Card`. It has the same shape but no Carbon variant matrix.
  • Marketing hero blocks with custom layouts → compose your own <div> with tokens.
  • Tabular data → use the DataTable pattern.