Radius

The corner radius scale, and how nested surfaces keep their corners concentric.

The radius scale names the corner radii buttery uses, from xs (6px) to full, and a few named for the part they round, such as kbd (5px) for keycaps. Use a radius token for every rounded corner, and let nested surfaces work out their own.

Use a radius token

Each radius is a CSS variable, --bt-r-<name>. Read it with var(), never a length of your own:

.tile {
  border-radius: var(--bt-r-lg);
}

.tile {
  border-radius: 11px;
}

Concentric corners

A card inside a panel looks right when its corners follow the panel's: the inner radius is the outer radius less the padding between them. Surface does this for you with radius="auto", never going below 4px.

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

export function SettingsGroup(): ReactElement {
  return (
    <Surface level="section" pad={2}>
      <Surface level="card" radius="auto" pad={4}>
        <Text variant="body">Notifications</Text>
      </Surface>
    </Surface>
  );
}