Brim
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A box filled to the brim. It takes all the room its parent leaves, hides whatever its content runs past the far edge, and draws a dithered Fade over that edge only while something is actually cut off. There is no scrollbar, which a static panel could not use anyway, and content that fits is shown in full with no fade.
Put it around any block that may hold more than the box: a list of facts, a run of steps, a paragraph, a row of badges. It grows before it clips, so the fade never lands on the first item.
Import
import { Brim } from "~lib/layout/brim";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
children | ReactNode | Yes | N/A | The content that may overflow |
direction | "vertical" | "horizontal" | No | "vertical" | The axis along which content may run on, and so which edge fades |
fade | number | No | 40 | Depth of the fade in px; about a row and a half of the text it covers |
fit | "fill" | "content" | No | "fill" | Take all the room left, or only as much as the content needs |
Examples
Vertical
The default. In a flex column the brim takes the height the blocks around it leave, and the rows that run past the bottom fade out.
Fits
When the content fits there is nothing to hide and no fade is drawn, so a short list is never dimmed merely for sitting at the bottom of its box.
Horizontal
A row that runs on past the right edge fades out there instead of wrapping.
Shallow fade
fade sets the depth. Keep it to about a row and a half of the text it covers: shallower
for small type, deeper for large.
Fit content
With fit="content" the brim is only as tall as its rows (as wide, for a horizontal brim), up
to the room its parent leaves. A justify-center or items-center parent then centers a short
list, here beside a headline figure, where the default brim would start its rows at the top.
A long list still takes all the room there is, and clips and fades at the far edge as before.
A large heading draws its descenders a little past its last line. A brim fitted to its content judges the spill from the lines alone, so a quotation that fits is never faded for that ink and needs no padding of its own.
In a filled card
Inside a Card with fill, the brim takes what the
title leaves and the card's border closes neatly under the fade.
Filling a column
The brim grows to the room left only when its flex ancestors let it shrink. Every flex child
between the brim and the box with the set height must carry min-h-0 (and min-w-0 for a
horizontal brim in a row), or the column stretches to its content instead and nothing is ever
cut off. When a brim shows no fade over content that plainly does not fit, this is the thing
to check. A brim with fit="content" needs the same min-h-0 chain to shrink to the room left,
but no taller parent to grow into.
In a saved render
The browser decides whether the fade shows, from the box's own overflow, so it needs no script to follow the box. A widget's saved render, frozen at one size and shown in a smaller box of the same shape, still clips its brims and still fades each one wherever it is cut, and a brim that fits its new box shows no fade. In a browser that cannot judge the overflow itself, the brim measures its content while the widget is live instead.