Patterns

Shortcut tile

A quick-action tile for the Home / empty-state / onboarding Shortcuts surface: a muted-surface pill-radius button with a circular primary-tinted icon disc on top and a short centered label below. Sized h-24 w-44 by default so a row of tiles reads as a horizontal shelf. Compose several in a Card with an overflow-x scroll to build the Yuno Home Shortcuts row.

Updated Jul 24, 2026 by Leonardo Posada

Anatomy

A tile <button> is a single flex-col with two things inside: a circular disc (size-10 rounded-full bg-primary/10 text-primary) holding a Phosphor icon at size 20 weight light, and a text-sm label below. Rest surface is bg-muted; hover darkens the whole tile (bg-muted-foreground/10) and the disc scales 1.05.

1
Tile surface
The button itself. h-24 w-44 rounded-lg bg-muted p-4 with a flex-col centering the disc + label. Hover shifts to bg-muted-foreground/10.
2
Icon disc
size-10 rounded-full bg-primary/10 text-primary. On hover the group-hover:scale-105 lifts it slightly. Holds a Phosphor icon (size 20 weight light).
3
Label
text-sm text-foreground, centered under the disc. whitespace-nowrap so short labels stay on one line — the tile has a fixed width.

Recipes

Single tile

A lone ShortcutTile. Rare on its own — usually you compose several — but useful for a compact 'Get started' inline CTA next to a description.

<ShortcutTile icon={ArrowsLeftRight} label="Payments" onClick={() => {}} />

Row of tiles

3-4 tiles in a Card with hidden horizontal overflow. The `no-scrollbar overflow-x-auto` combo lets long shelves scroll without showing a browser scrollbar — the Home Shortcuts row is a visual shelf, not a scrollable region. Trade-off accepted: on desktop with a mouse the scroll is invisible; users still swipe via trackpad (Mac) or Shift+wheel. Use this recipe when the tiles are semantically peers — all sections or all actions — with no split.

<div className="rounded-lg border border-border bg-card p-6">
  <div className="no-scrollbar -mx-6 overflow-x-auto px-6">
    <div className="flex items-center gap-6">
      <ShortcutTile icon={ArrowsLeftRight} label="Payments" />
      <ShortcutTile icon={ChartLineUp} label="Insights" />
      <ShortcutTile icon={TreeStructure} label="Routing" />
    </div>
  </div>
</div>

Grouped row (Home Shortcuts)

The canonical Yuno Home Shortcuts: a Card that holds two semantically distinct groups separated by a vertical Separator, with the horizontal scrollbar hidden via `no-scrollbar`. Left of the Separator = SECTIONS the user can navigate to (Payments, Insights, Routing…). Right of the Separator = ACTIONS the user can perform (Create a connection, Invite a member…). Both lists are dynamic — the sections a merchant sees and the actions they're offered change per user, role, and context. The 3 + 4 shown here are illustrative defaults, not a fixed catalog. The Separator communicates the go-somewhere vs make-something split without needing a header per group.

// Left of the Separator = SECTIONS (navigate to dashboard areas).
// Right of the Separator = ACTIONS (create / do things).
// Both lists are DYNAMIC — the sections a merchant sees and the actions
// they're offered can change per user, per role, per context. These 3 + 4
// are just illustrative defaults.

<div className="rounded-lg border border-border bg-card p-6">
  <div className="no-scrollbar -mx-6 overflow-x-auto px-6">
    <div className="flex items-center gap-6">
      {/* Sections — where the user can go */}
      <ShortcutTile icon={ArrowsLeftRight} label="Payments" />
      <ShortcutTile icon={ChartLineUp} label="Insights" />
      <ShortcutTile icon={TreeStructure} label="Routing" />

      <Separator orientation="vertical" className="h-24 shrink-0" />

      {/* Actions — what the user can do */}
      <ShortcutTile icon={BoundingBox} label="Create a connection" />
      <ShortcutTile icon={UserPlus} label="Invite a new member" />
      <ShortcutTile icon={ShieldWarning} label="Create a risk condition" />
      <ShortcutTile icon={LinkSimple} label="Create a payment link" />
    </div>
  </div>
</div>

Import

Copy this import line at the top of the file where you compose this molecule.

The tile takes a Phosphor icon component (as a value, not a JSX element) so it can size/weight it internally. Import the icon from the SSR-safe subpath.

import { ShortcutTile } from "@/components/patterns/shortcut-tile";
import { ArrowsLeftRight } from "@phosphor-icons/react/dist/ssr";

Props

Everything else is forwarded to the underlying elements via ...props.

Prop	Type	Default	Description
icon	React.ComponentType (required)	—	Phosphor icon component (imported from '@phosphor-icons/react/dist/ssr'). The tile renders it at size 20 weight light inside the disc.
label	string (required)	—	Short label shown below the icon. Keep it to 1-3 words — the tile is fixed width and truncation is not styled.
onClick	() => void	—	Click handler. Standard button semantics — the tile is a real <button type='button'>.
className	string	—	Extra classes merged onto the tile <button>.

Cross-links to the atoms this molecule composes and sibling patterns.

ButtonThe tile is a real <button>. Keep it accessible: aria-label if the label alone isn't descriptive.
SeparatorThe vertical divider in the grouped Home Shortcuts recipe.
IconographyOnly Phosphor light / fill are allowed. The tile passes weight='light' internally.