Material
Orbital surface container with material variant, elevation, and corner treatment.
Surface treatment only (background, shadow, radius, stroke) — no layout or padding. Put spacing and flex layout on inner Flex or Card slots.
Pick MaterialElevation for depth: Flat for co-planar shell and bordered panels, Resting for cards at rest, Raised for emphasized callouts, Floating for popovers, and Modal for dialogs. Use MaterialVariant::Scrim as a scrim/backdrop surface (often paired with Backdrop).
- Solid for most layout regions, cards, and content canvases
- Outlined for flat bordered panels — pair with
MaterialElevation::Flat - Frost / Shell for shell chrome and transient panels
- Scrim for modal overlays — often paired with Backdrop
- Pick a
MaterialVariantfor opacity and backdrop treatment. - Set
MaterialElevation—Restingfor inline panels,Raisedfor emphasized cards. - Set
MaterialCornerswhen square edges are required. - Put layout and padding on inner Flex or card compound slots, not on Material.
Default opaque surface with resting elevation for inline panels and content regions.
Raised elevation emphasizes a surface above its neighbors—common for hero cards and callouts.
Compare Solid, Frost, Shell, and Scrim treatments side by side over a textured background.
Shadow tiers from Flat through Modal on Solid — each tier maps to a design-token shadow scale.
Frosted glass with floating elevation for transient panels and popovers over busy content.
Turf class sets --orbital-material-width for one-off sizing without a style prop.
Custom elevation scale in the theme scope increases resting shadow depth on the sample surface.
Card delegates surface treatment to Material — layout gaps live on inner Flex, not the surface root.
Stroke-bordered surface with no shadow — typical for outlined panels and list items.
Square corner treatment removes border radius on the surface root.
Side-by-side contrast between filled solid and stroke-outlined surfaces.