A tile that frames a single icon.
import { IconTile } from '@oztix/roadie-components'
Place a Phosphor icon as the only child. The tile sizes and centres it for you.
The default emphasis is subtle. Use strong for a solid fill, or step down to subtler for the lightest tint.
Sizes run xs through 3xl. Each maps to a Tailwind size-* box on the tile, with matching internal padding and icon size. The tile dimension is 2 × padding + icon. The tier names are variant keys, not Tailwind utilities (there is no size-3xl).
Tiles are square by default, with a corner radius that scales with the size so it stays in proportion. Set shape='circle' for a full-radius pill.
Intent sets the colour palette. The tile inherits its surrounding intent context unless you set one directly.
Use weight='bold' up to 48px (the lg size), then switch to weight='duotone' above 48px. A bold outline can look hollow and under-filled on a large tile, while duotone's soft tinted fill gives bigger tiles more presence.
Do
Frame an icon that stands for the thing it sits beside, like a list row, a settings row, a feature block or an EmptyState.
Don’t
Don't put a tile in a button, menu item, tab, badge or input, where the icon only labels the action. Use a bare bold icon there, at the size the control sets.
Do
Place one Phosphor icon as the only child.
Don’t
Don't cram multiple icons or text into a tile. It's a frame, not a layout container.
Do
Use weight='bold' up to 48px (the lg size); switch to weight='duotone' above it. Never go lighter than bold.
Don’t
A bold outline looks hollow and under-filled on a large tile. Duotone's tinted fill gives big tiles more presence.
<div className='intent-accent'><IconTile><GearIcon weight='bold' /></IconTile></div>
Do
Inherit intent from the surrounding context where you can.
<IconTile intent='accent'>…</IconTile><IconTile intent='accent'>…</IconTile><IconTile intent='accent'>…</IconTile>
Don’t
Don't hard-code the same intent on every tile when a parent already sets it.
Payment complete
Do
Add accompanying text or an aria-label when the icon carries meaning.
Don’t
A lone tile with no label leaves its meaning to guesswork for screen readers.