Skip to main content

Interface: SurfaceContainerProperties

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

Properties for the SurfaceContainer component.

Hierarchy​

View Summary

Extends​

Indexable​

[key: `data-${string}`]: string | number | boolean | undefined

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

id?​

readonly optional id?: string

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

Optional DOM id forwarded to the underlying element.

Inherited from​

ThemedBoxProperties.id

aria-describedby?​

readonly optional aria-describedby?: string

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

ARIA described-by reference for additional descriptions

Inherited from​

ThemedBoxProperties.aria-describedby

aria-disabled?​

readonly optional aria-disabled?: boolean

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

ARIA disabled state for interactive controls that are visually disabled

Inherited from​

ThemedBoxProperties.aria-disabled

aria-label?​

readonly optional aria-label?: string

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

ARIA label for screen readers

Inherited from​

ThemedBoxProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby?: string

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

ARIA labelledby reference for complex labeling

Inherited from​

ThemedBoxProperties.aria-labelledby

aria-level?​

readonly optional aria-level?: number

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

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:62

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:69

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:74

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:83

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:88

Mouse enter callback.

Returns​

void

Inherited from​

ThemedBoxProperties.onMouseEnter

onMouseLeave?​

readonly optional onMouseLeave?: () => void

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

Mouse leave callback.

Returns​

void

Inherited from​

ThemedBoxProperties.onMouseLeave

open?​

readonly optional open?: boolean

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

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:109

Padding size variant.

Default Value​

"md";

Inherited from​

ThemedBoxProperties.padding

role?​

readonly optional role?: string

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

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:121

Border radius variant.

Default Value​

"md";

Inherited from​

ThemedBoxProperties.rounded

shadow?​

readonly optional shadow?: BoxShadow

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

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:133

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:140

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:146

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:153

Visual variant used to choose background styling.

Default Value​

"primary";

Inherited from​

ThemedBoxProperties.variant