Icon tile
A 16px icon on a 32px rounded tile. It is how Ascern shows an icon larger than 16px: in empty states, setup steps and rule templates.
Playground
Change the controls to try each prop. The code under the preview updates as you go and lists only the props you changed; copy it into your page.
import { BriefcaseIcon } from '@phosphor-icons/react';import { IconTile } from '@/ui/icon-tile';<IconTile label=""> <BriefcaseIcon /></IconTile>Default
The neutral tile: the tile fill with a dark grey 16px icon. Use it for almost every tile.
import { BriefcaseIcon } from '@phosphor-icons/react';
import { IconTile } from '@/ui/icon-tile';
export default function IconTileDefault() {
return (
<IconTile>
<BriefcaseIcon />
</IconTile>
);
}Danger
Only for the tile of an empty state that failed to load, such as "This page didn't load".
import { WarningCircleIcon } from '@phosphor-icons/react';
import { IconTile } from '@/ui/icon-tile';
export default function IconTileDanger() {
return (
<IconTile tone="danger">
<WarningCircleIcon />
</IconTile>
);
}With a label
The tile is decorative by default. When nothing next to it names the icon, pass label so screen readers read it as an image.
import { EnvelopeSimpleIcon } from '@phosphor-icons/react';
import { IconTile } from '@/ui/icon-tile';
export default function IconTileLabelled() {
return (
<IconTile label="Mail">
<EnvelopeSimpleIcon />
</IconTile>
);
}In setup steps
The tile leads the row, the title and one line follow, and the status sits at the end.
- Connect your mailGmail or OutlookDone
- Connect your calendarGoogle or Outlook
import { CalendarBlankIcon, EnvelopeSimpleIcon } from '@phosphor-icons/react';
import { Button } from '@/ui/button';
import { IconTile } from '@/ui/icon-tile';
export default function IconTileSetupSteps() {
return (
<ul className="flex w-full max-w-[340px] flex-col divide-y divide-border rounded-xlarge border border-border bg-surface">
<li className="flex items-center gap-150 px-200 py-150">
<IconTile>
<EnvelopeSimpleIcon />
</IconTile>
<div className="flex min-w-0 grow flex-col">
<span className="text-body leading-body font-medium text-text">Connect your mail</span>
<span className="text-body-small leading-body-small text-text-subtle">Gmail or Outlook</span>
</div>
<span className="rounded-medium bg-success-subtle px-075 text-body-small leading-body-small font-medium text-success">Done</span>
</li>
<li className="flex items-center gap-150 px-200 py-150">
<IconTile>
<CalendarBlankIcon />
</IconTile>
<div className="flex min-w-0 grow flex-col">
<span className="text-body leading-body font-medium text-text">Connect your calendar</span>
<span className="text-body-small leading-body-small text-text-subtle">Google or Outlook</span>
</div>
<Button>Connect</Button>
</li>
</ul>
);
}In a rule card
The tile tops the card, with the title and one line below it.
import { ChatCircleTextIcon } from '@phosphor-icons/react';
import { IconTile } from '@/ui/icon-tile';
export default function IconTileRuleCard() {
return (
<div className="flex w-full max-w-[300px] flex-col gap-150 rounded-xlarge border border-border bg-surface p-200">
<IconTile>
<ChatCircleTextIcon />
</IconTile>
<div className="flex flex-col gap-025">
<span className="text-body leading-body font-medium text-text">Draft replies to candidates</span>
<span className="text-body-small leading-body-small text-text-subtle">Flo writes the reply; you approve every send.</span>
</div>
</div>
);
}Date label
A date written the way people say it: words near today, a short date this year, month and year before that. In the agency's time zone and date order.
Item
A row in a list with no columns: Inbox threads, Needs you, tasks, connected accounts, search results. A leading slot, a title, an optional second line, and a trailing slot.