Primitives

IconTile

An icon in a tinted square, so a row is recognized before it is read: a category, an account, a status. Colors are the eight palette steps, the brand and the four statuses, each a pair the contrast test measures. It is decorative unless you name it. A badge in the corner, cut out of the surface, can carry what is behind it, such as a bank.

view .md

Preview

the palette, derived from the brand

brand, neutral and the statuses

sizes, and a badge in the corner

Installation

terminal

bash

npx @entrepta/cli@latest add icon-tile

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

icon-tile.tsx

tsx

import { IconTile } from "@/components/entrepta/icon-tile"
import { ForkKnifeIcon } from "@phosphor-icons/react"

<IconTile icon={ForkKnifeIcon} color="chart-3" />
<IconTile icon={ForkKnifeIcon} color="brand" size="lg" />
<IconTile icon={WalletIcon} badge={<Avatar name="Bank" size="sm" />} />

Props

Prop	Type	Default	Description
icon	Icon \| ReactElement	-	A Phosphor icon, or an element from a server file
color	"neutral" \| "brand" \| "chart-1" … "chart-8" \| "success" \| "warning" \| "error" \| "info"	"neutral"	Store the key, never a hex, so the color follows every theme
size	"sm" \| "md" \| "lg"	"md"	24, 32 or 40px
badge	ReactNode	-	Something small in the corner, cut out of --cutout