Skip to content
DOL Studio

IconBox

Design: extension Code: Code only icontile

Live preview

Tones

6 tones — brand / info / success / warning / danger / neutral. Each tinted bg (50) + matching ink (600/700).
brand
info
success
warning
danger
neutral

Sizes

4 sizes — sm (32px) / md (40px default) / lg (56px) / xl (72px). Inner icon scales proportionally (50% of box).
sm
md
lg
xl

Shape variants

3 shapes — rounded-xl (default) / rounded-full (circle, for avatar-style icons) / rounded-md (square-ish, for grid contexts).
rounded-xl
rounded-full
rounded-md

Composition use-cases

Production compositions — IconBox as visual marker inside FeatureCard / NavItem grid / StatBlock. Tone telegraphs context (brand=primary, success=study, warning=attention).

Smart matching

FeatureCard — IconBox at md size, brand tone, rounded-xl

Khoá học

NavItem grid — IconBox top-left, success tone, study context

Active session

StatBlock header — IconBox marker, warning tone, attention context

Import & files

Import
import { IconBox } from "@/components/ui/IconBox";
Source file
components/ui/IconBox.tsx

Spec

Spec Props · Axes · Usage

Props

Prop Type Default Description
icon ReactNode - —
bg string 'bg-slate-50' —
color string 'text-slate-700' —
size 'sm' | 'md' | 'lg' | 'xl' 'md' —

Variants · Tones · Sizes

Sizes
smmdlgxl

Usage

Pair `bg` + `color` from the same family (e.g., `bg-blue-50` + `text-blue-600`). Not a standalone tile - compose inside a card.

Figma note: Playground composition pattern - not a single Figma component category. See Playground source.

Examples

Examples 1
  • Size matrix (sm → xl) with skill colors

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# IconBox
Domain: general · Category: layout
Design: extension · Code: code-only


## Description
Rounded box housing a lucide icon with background tint. Used inside FeatureCard, NavItem grids, stat blocks.


## Import
```ts
import { IconBox } from "@/components/ui/IconBox";
```
Source: `components/ui/IconBox.tsx`


## Props (4)
| Prop | Type | Default | Description |
|---|---|---|---|
| `icon` | `ReactNode` | - |  |
| `bg` | `string` | 'bg-slate-50' |  |
| `color` | `string` | 'text-slate-700' |  |
| `size` | `'sm' | 'md' | 'lg' | 'xl'` | 'md' |  |


## Axes
Sizes: `sm`, `md`, `lg`, `xl`


## Usage
Pair `bg` + `color` from the same family (e.g., `bg-blue-50` + `text-blue-600`). Not a standalone tile - compose inside a card.


## Examples
- **Size matrix (sm → xl) with skill colors**

Related

  • M
    audio

    Media

    Design only

  • Mockup UI (Status bar, Indicator, Browser)

    Coded
  • Section title

    Collapse

    Coded
  • Bạn đã xem hết

    Footer

    Coded

  • Card

    Code only

  • FeatureCard

    Code only

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).