Surface

Surface is the foundational component that provides consistent styling and layout capabilities. It's a versatile container that can be configured for spacing, layout, color schemes, and more.

Introduction

Surface
<Surface variant="soft" />
Playground
Variant
  • solid
  • outlined
  • soft
  • plain
  • mixed
Color
primary
neutral
success
warning
error
black
Shape
  • sharp
  • rounded
  • pill
  • circle

Basics

Container Behavior
Percentage Width
Auto Height
Flexbox Layout
Item 1
Item 2
Item 3
<Row variant="outlined" justify="between" items="center" p="sm" gap="md">
	<Surface variant="soft" p="sm">Item 1</Surface>
	<Surface variant="soft" p="sm">Item 2</Surface>
	<Surface variant="soft" p="sm">Item 3</Surface>
</Row>

Customization

variant
solid
soft
outlined
mixed
plain
color
primary
neutral
success
warning
error
shape
sharp
rounded
pill
padding 
(p | px | py | pt | pr | pb | pl)
sm
md
lg
xl
Custom

Accessibility

The Surface component is designed to be accessible by default: - Uses semantic HTML elements when appropriate (`element` prop) - Maintains proper color contrast ratios - Supports keyboard navigation when used as an interactive element - Preserves correct document structure

Anatomy

<div class="w-solid w-primary w-rounded" style="--w-clr-bg:var(--color-primary-6);--w-clr-fg:var(--color-white);">
	<!-- Content -->
</div>

API

Import
import {Surface} from 'wui/surface';
Props