@edux-design/tiles

Button-like tile primitives for larger action targets that need icon, title, description, and supporting metadata in a single pressable surface.

Components

• Tile: a pressable surface built on the native <button> element.
• TileGroup: a layout wrapper for stacking or arranging related tiles.

Usage

import { Tile, TileGroup } from "@edux-design/tiles";

<TileGroup aria-label="Question creation actions">
  <Tile>
    <Tile.StartIcon>
      <CreateIcon aria-hidden="true" />
    </Tile.StartIcon>
    <Tile.Body>
      <Tile.Title>Create assignment</Tile.Title>
      <Tile.Description>Start from a blank activity shell.</Tile.Description>
    </Tile.Body>
    <Tile.EndIcon>
      <ChevronRight aria-hidden="true" />
    </Tile.EndIcon>
  </Tile>

  <Tile isSelected>
    <Tile.Body>
      <Tile.Title>Import questions</Tile.Title>
      <Tile.Description>
        Bring in existing content from another source.
      </Tile.Description>
    </Tile.Body>
  </Tile>
</TileGroup>

Accessibility

Tile uses a real <button> so keyboard activation and disabled behaviour come for free. When the tile represents a selected toggle-style option, set isSelected; this maps to aria-pressed.

If you render an icon-only tile, provide an accessible name with aria-label.

If TileGroup is being used as a named control set, provide aria-label or aria-labelledby so it exposes an accessible group name.

Stories

Stories live in src/demos/Tile.stories.jsx and cover single-tile, grouped, selected, disabled, and rich-content states.