InitialsTile
A square tile with up to two initials, standing in for a workspace or team that has no picture.
import { InitialsTile } from "@butteryui/react";Demo
When to use it
Use it for
- A workspace's mark in a sidebar's workspace switcher or an account menu
- Teams or companies in a list, without logos
- A team among round avatars, with shape="circle"
Not for
- A person: use Avatar, which is round and shows their picture
- A brand's own logo: show the logo
Examples
Sizes
The four sizes, from a 20px tile in a dense list to a 40px one on a settings page, rounded and round.
xs, 20px, rounded
sm, 24px, rounded
md, 32px, rounded
lg, 40px, rounded
xs, 20px, circle
sm, 24px, circle
md, 32px, circle
lg, 40px, circle
Team tiles
Teams shown by their tiles alone, each named for screen readers.
Workspace name
A workspace's tile beside its name, as in a sidebar's workspace switcher.
Workspace settings
A new workspace's settings: the tile and the title follow the name as it's typed.
Variants and states
Sizes
20 and 24 at r6, 32 and 40 at r8.
Rounded and circle
Rounded squares by default; circles to sit beside round avatars, such as a team in a list of people.
Props
InitialsTile
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | The name the initials come from, such as a workspace's or a team's. | |
size | "xs" | "sm" | "md" | "lg" | "sm" | How big it is: xs 20, sm 24, md 32 or lg 40. Defaults to "sm". |
shape | "circle" | "rounded" | "rounded" | "rounded" (the default), a square with 6px corners up to sm and 8px from md, or "circle", to sit
beside round avatars, such as a team among people. |
label | string | Names the tile for screen readers when its name isn't written beside it. Without one, it's decorative. |
It also takes Omit<ComponentPropsWithRef<"span">, "children">.
Also exported
| Export | Description |
|---|---|
initialsOf(name: string): string | Up to two initials from a name, in capitals: the first letters of its first and last words. |
Accessibility
Decorative by default, since the name is usually written beside it; give it a label when it stands alone, and it becomes an image named by it.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
A square 20px across at size="xs", 24 at "sm", the default, 32 at "md" and 40 at "lg", with 6px corners up to "sm" and 8px from "md", or a circle with shape="circle"; it never shrinks. Its one or two initials sit in the middle on one line and never wrap. It takes no presses, so it has no hit area.
Related
See it in the roastery demo's payouts, roast plan and settings.