CynosureComponents / Feedback and display
IconTile
A Facet icon on a tinted square or circle: the mark of a feature, a settings section, a stat or a list item. It is decorative unless you give it a label. For a person or a team use Avatar; for an icon inside a line of text use Icon.
When to useLink to "When to use"
- Feature grids and cards: a tile beside or above each feature's title.
- Settings sections and empty states: a mark that sets the subject at a glance.
- Inside other components: Stat takes an
icon, and List draws one per item withmarker="tile".
Use something else when:
- it stands for a person, a team or an account: Avatar
- it should do something when pressed: IconButton
- the icon sits inside a line of text or a button: Icon
- it shows a status word: Badge
UsageLink to "Usage"
import { IconTile } from "@arshad-shah/cynosure";
import { zap } from "@arshad-shah/cynosure/icons";
<IconTile icon={zap} />
<IconTile icon={zap} label="Fast builds" />
<IconTile icon={zap} tone="success" variant="solid" size="lg" shape="circle" />SizesLink to "Sizes"
sm, md and lg are the control heights, so a tile lines up with a Button of the same size and grows with the theme's scale. The icon is half the tile.
Tones and variantsLink to "Tones and variants"
soft (default) is a tint of the tone, solid fills with it and outline draws a tinted border on the surface. The icon uses the tone's readable text colour, or the on-tone colour on solid.
Square and circleLink to "Square and circle"
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
iconRequired | The Facet icon drawn on the tile. | IconData | |
label | Accessible name. With it the tile is an image (role="img") named by it; without it the tile is decorative and hidden from assistive technology, for when text beside it says the same thing. | string | |
size | Width and height: the control heights, so they scale with the theme. Default "md". | Size | "md" |
tone | Semantic colour. Default "accent". | Tone | "accent" |
variant | soft tinted fill, solid full tone fill, outline a tinted border on the surface. Default "soft". | "soft" | "solid" | "outline" | "soft" |
shape | Outline: a square with rounded corners, or a circle. Default "square". | "circle" | "square" | "square" |
className | Added to the root element, for layout. | string | |
style | Layout only. Restyle through --cy-icon-tile-* tokens. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
| Setting | What assistive technology gets |
|---|---|
no label (default) | Nothing: the tile is aria-hidden. Text beside it names the thing |
label="Analytics" | One image (role="img") named "Analytics"; the SVG inside stays hidden |
- Keyboard: none. A tile is never focusable.
- Forced colours: the fill is dropped; a
CanvasTextborder keeps the shape and the icon draws inCanvasText.
TouchLink to "Touch"
Nothing in a tile can be pressed, so it has no hit area. Put it in a Card with href or onClick to make the whole card the target.
ThemingLink to "Theming"
| Token | Default | What it sets |
|---|---|---|
--cy-icon-tile-size-{sm,md,lg} | --cy-control-height-{sm,md,lg} | Width and height |
--cy-icon-tile-radius | size times --cy-radius-factor | Corner radius of the square |
--cy-icon-tile-soft-mix | 16% | Tint strength of soft |
--cy-icon-tile-icon-scale | 0.5 | Icon size as a fraction of the tile |
createTheme({ components: { iconTile: { radius: "4px", iconScale: "0.6" } } });className and style are for layout only. Change the look through tokens so every product stays consistent.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.