Surface and nesting

How surfaces nest, with concentric corners and even insets, and the Surface primitive that does it.

A surface is a region with a background, an edge and a radius, such as a panel, a section well or a card. Nest surfaces with Surface, and each inner one takes its corners from the one around it, so a screen of nested regions reads as one shape.

The nesting recipe

1. Panel, section, card

   buttery's screens nest a few levels deep: a panel on the app background, a section well inside it, and cards inside the well, each with rows inside.

2. Corners are concentric

   A child's radius is its parent's radius less the parent's padding, which radius="auto" works out. The one deliberate exception is a section, which is sized from the card inside it.

3. Insets are even

   A nested surface sits evenly inside its parent, with the same inset on every open side.

4. Titles line up

   A section's title starts on the same edge as the rows inside it.

In code, each level is a Surface, and the card takes radius="auto":

import type { ReactElement } from "react";
import { Stack, Surface, Text } from "@butteryui/core";

export function Settings(): ReactElement {
  return (
    <Surface level="panel">
      <Surface level="section">
        <Stack gap={2}>
          <Text variant="control">Notifications</Text>
          <Surface level="card" radius="auto">
            <Text variant="label">Email me when an order ships</Text>
          </Surface>
        </Stack>
      </Surface>
    </Surface>
  );
}

Here is the recipe at full size, in an editor's inspector:

Surface