Skip to main content

Interface: SurfaceContainerProperties

Defined in: src/components/shared/SurfaceContainer.tsx:15

Properties for the SurfaceContainer component.

Extends​

Properties​

children?​

readonly optional children: ReactNode

Defined in: shared/types/componentProps.ts:36

Component content (text, elements, or other components)

Inherited from​

ThemedBoxProperties.children

disabled?​

readonly optional disabled: boolean

Defined in: shared/types/componentProps.ts:40

Whether the component is disabled and non-interactive

Inherited from​

ThemedBoxProperties.disabled

aria-describedby?​

readonly optional aria-describedby: string

Defined in: shared/types/componentProps.ts:54

ARIA described-by reference for additional descriptions

Inherited from​

ThemedBoxProperties.aria-describedby

aria-label?​

readonly optional aria-label: string

Defined in: shared/types/componentProps.ts:56

ARIA label for screen readers

Inherited from​

ThemedBoxProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby: string

Defined in: shared/types/componentProps.ts:58

ARIA labelledby reference for complex labeling

Inherited from​

ThemedBoxProperties.aria-labelledby

aria-level?​

readonly optional aria-level: number

Defined in: shared/types/componentProps.ts:60

ARIA heading level for elements using role="heading"

Inherited from​

ThemedBoxProperties.aria-level

className?​

readonly optional className: string

Defined in: src/components/shared/SurfaceContainer.tsx:17

Optional class name applied to the underlying element.

Overrides​

ThemedBoxProperties.className

as?​

readonly optional as: BoxElement

Defined in: src/theme/components/ThemedBox.tsx:55

Element type to render (for example div, button, section).

Default Value​

"div";

Inherited from​

ThemedBoxProperties.as

border?​

readonly optional border: boolean

Defined in: src/theme/components/ThemedBox.tsx:62

Render a visible border when true.

Default Value​

false;

Inherited from​

ThemedBoxProperties.border

data-testid?​

readonly optional data-testid: string

Defined in: src/theme/components/ThemedBox.tsx:67

Test identifier for automated testing (data-testid attribute).

Inherited from​

ThemedBoxProperties.data-testid

onClick?​

readonly optional onClick: ClickHandler

Defined in: src/theme/components/ThemedBox.tsx:76

Click handler for interactive usage.

Remarks​

When provided the component will add keyboard handling and ARIA attributes for accessibility if the rendered element is a div.

Inherited from​

ThemedBoxProperties.onClick

onMouseEnter()?​

readonly optional onMouseEnter: () => void

Defined in: src/theme/components/ThemedBox.tsx:81

Mouse enter callback.

Returns​

void

Inherited from​

ThemedBoxProperties.onMouseEnter

onMouseLeave()?​

readonly optional onMouseLeave: () => void

Defined in: src/theme/components/ThemedBox.tsx:86

Mouse leave callback.

Returns​

void

Inherited from​

ThemedBoxProperties.onMouseLeave

open?​

readonly optional open: boolean

Defined in: src/theme/components/ThemedBox.tsx:95

Whether the dialog is open (for dialog elements only).

Remarks​

This prop is only relevant when as="dialog" and controls the dialog's visibility using the native HTML dialog open attribute.

Inherited from​

ThemedBoxProperties.open

padding?​

readonly optional padding: BoxPadding

Defined in: src/theme/components/ThemedBox.tsx:102

Padding size variant.

Default Value​

"md";

Inherited from​

ThemedBoxProperties.padding

role?​

readonly optional role: string

Defined in: src/theme/components/ThemedBox.tsx:107

Explicit ARIA role to apply when the component becomes interactive.

Inherited from​

ThemedBoxProperties.role

rounded?​

readonly optional rounded: BoxRounded

Defined in: src/theme/components/ThemedBox.tsx:114

Border radius variant.

Default Value​

"md";

Inherited from​

ThemedBoxProperties.rounded

shadow?​

readonly optional shadow: BoxShadow

Defined in: src/theme/components/ThemedBox.tsx:119

Shadow depth variant. When omitted, no shadow class is added.

Inherited from​

ThemedBoxProperties.shadow

style?​

readonly optional style: CSSProperties

Defined in: src/theme/components/ThemedBox.tsx:126

Inline style object forwarded to the element.

Default Value​

{ } (internal singleton)

Inherited from​

ThemedBoxProperties.style

surface?​

readonly optional surface: BoxSurface

Defined in: src/theme/components/ThemedBox.tsx:133

Surface variant used to select contextual surface styles.

Default Value​

"base";

Inherited from​

ThemedBoxProperties.surface

tabIndex?​

readonly optional tabIndex: number

Defined in: src/theme/components/ThemedBox.tsx:139

Explicit tabIndex for interactive elements. When omitted and the component is interactive, a sensible default is applied.

Inherited from​

ThemedBoxProperties.tabIndex

variant?​

readonly optional variant: BoxVariant

Defined in: src/theme/components/ThemedBox.tsx:146

Visual variant used to choose background styling.

Default Value​

"primary";

Inherited from​

ThemedBoxProperties.variant