Tile

Tiles are interactive, clickable surfaces rendered as buttons. Use them for selection grids, dashboard widgets, or navigation cards.

Basic Usage

import { Tile } from "@paramanu/data-display-react"

export default function App() {
return <Tile variant="outline">Select this option</Tile>
}

<button type="button" class="pm-tile pm-tile--outline pm-tile--md">Select this option</button>

Variants

import { Tile } from "@paramanu/data-display-react"

export default function App() {
return (
  <>
    <Tile variant="outline">Outline</Tile>
    <Tile variant="filled">Filled</Tile>
    <Tile variant="ghost">Ghost</Tile>
  </>
)
}

<button type="button" class="pm-tile pm-tile--outline pm-tile--md">Outline</button>
<button type="button" class="pm-tile pm-tile--filled pm-tile--md">Filled</button>
<button type="button" class="pm-tile pm-tile--ghost pm-tile--md">Ghost</button>

Selected State

import { Tile } from "@paramanu/data-display-react"

export default function App() {
return <Tile selected>Selected</Tile>
}

<button type="button" class="pm-tile pm-tile--outline pm-tile--md pm-tile--selected" aria-selected="true">Selected</button>

Accessibility

Tiles render as <button> elements for keyboard accessibility.
Use aria-selected to indicate the selected state.
Disabled tiles use both disabled and aria-disabled.

Best Practices

Use tiles for selection patterns where users pick one or more options.
Group tiles visually in a grid layout for clear scanning.

Props

Prop	Type	Default	Description
`variant`	`"outline" \| "filled" \| "ghost"`	`"outline"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls padding and font size
`selected`	`boolean`	`false`	Selected/active state
`disabled`	`boolean`	`false`	Disables interaction

CSS Classes

Class	Description
`pm-tile`	Base tile class
`pm-tile--{variant}`	Variant modifier
`pm-tile--{size}`	Size modifier
`pm-tile--selected`	Selected state
`pm-tile--disabled`	Disabled state