Elevation

Surface levels, from the app's background to dialogs, and the shadows that set them apart.

A surface level is a background, edge, shadow, radius and padding that together say how far something sits above the page. Use Surface with a level, rather than styling backgrounds and shadows by hand, so every card, menu and dialog reads at the right height in light and dark.

The levels

From the lowest:

Give Surface its level with level, which is "card" by default:

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

export function MenuPanel(): ReactElement {
  return (
    <Surface level="floating" pad={3}>
      <Text variant="menu">Duplicate</Text>
    </Surface>
  );
}

In dark mode, surfaces get lighter as they rise instead of casting stronger shadows, which can't be seen on a dark background. The same levels in both:

Shadows

The shadows behind the levels, and the rings for selection and focus: