IconTile
A neutral square holding an icon, for what has no face: a system notice, a file, an app, a computer. It sits where an avatar would and takes the avatar sizes.
import { IconTile } from "raft-ui";
<IconTile>{/* an icon */}</IconTile>The neutral tile is the default. warning (an error or a warning) and information (a message) are only for system notices, such as the notification centre's.
sizedefault: "md""xs" | "sm" | "md" | "lg"
The avatar sizes: 19, 27, 35 or 51, with a 11, 14, 18 or 22px icon.
variantdefault: "default""default" | "warning" | "information"
default: surface-sunken with an ink-2 icon. warning and information: the soft orange or cyan of a system notice, with an ink icon.
renderReactElement | (props, state) => ReactElement
Change the root element.
...propsuseRender.ComponentProps<"span">
Native span attributes. The tile is aria-hidden: it is decorative beside its words. One that means something on its own takes role="img" and an aria-label, and is announced.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "md" | The avatar sizes: 19, 27, 35 or 51, with a 11, 14, 18 or 22px icon. |
variant | "default" | "warning" | "information" | "default" | default: surface-sunken with an ink-2 icon. warning and information: the soft orange or cyan of a system notice, with an ink icon. |
render | ReactElement | (props, state) => ReactElement | — | Change the root element. |
...props | useRender.ComponentProps<"span"> | — | Native span attributes. The tile is aria-hidden: it is decorative beside its words. One that means something on its own takes role="img" and an aria-label, and is announced. |