Surface

Usage

<script>
	import { Surface } from 'bref-ui';
</script>

<Surface as="section" variant="soft" spacing="medium" radius="small">
	<h2>Details</h2>
	<p>Content inside the surface.</p>
</Surface>

Render Theme once to load the shared paint recipes. The typed surface helper applies the same recipes to native HTML; pass glass: true for translucent material. Component styles supply padding, radius and layout.

<script>
	import { Theme, surface } from 'bref-ui';
</script>

<Theme />
<button class={surface({ variant: 'filled', color: 'primary', shadow: 'small', hover: 'medium' })}>
	Save
</button>

Playground

Explore paint and layout together. The preview has a fixed height for fill and scrolling.

<Surface
	as="div"
	variant="soft"
	color="background"
	glass={false}
	spacing={'medium'}
	orientation="vertical"
	width="fill"
	height="fit"
	radius={'small'}
	shadow={false}
	hover={undefined}
	scroll={false}
>
	<strong>Surface</strong>
	<span
		>Long content stays readable and wraps within narrow layouts. Change the controls to explore the
		container.</span
	>
</Surface>

Colors and variants

Switch the shared theme control to compare light and dark. Filled uses a strong opaque color; background-tinted panels retain the foreground text color.

Contextual glass

Soft surfaces use an opaque tint. Add the glass prop when a panel sits above visual content; transparency and blur then belong to that panel alone. Keep controls inside it opaque to avoid nested blur. Reduced transparency, increased contrast and unsupported backdrop filtering use a solid fill.

<Surface glass variant="soft" spacing="medium" radius="small">Panel content</Surface>

<button class={surface({ variant: 'soft', color: 'primary', hover: 'medium', glass: true })}>
	Save
</button>

Spacing, dimensions and radius

Saved 0 times.

Scrolling and composition

Surface forwards native attributes and events to its root. Pass class, style, ARIA attributes and event handlers directly; content uses a Svelte children snippet. Explicit tabindex overrides the scroll focus default.

<Surface
	as="section"
	id="details"
	class="custom-surface"
	style="font-style: italic;"
	aria-label="Details"
	tabindex={0}
	onfocus={onFocus}
>
	<p>Content inside the surface.</p>
</Surface>

Give the parent a fixed height and use height="fill" to constrain scrolling. A scrollable Surface can receive keyboard focus; use arrow keys to scroll.

<div style="height: 12rem;">
	<Surface scroll height="fill">Content</Surface>
</div>

Props

Migration: pass native attributes directly to Surface; hover replaces hoverEffect. Replace capsule with a named size, a rem value, or a percentage radius. Use scroll for automatic overflow.