Skip to main content

Interface: ThemedBoxProperties

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

The props accepted by the ThemedBox component.

Remarks​

All properties are optional except children. Several props have default values which are applied when the prop is omitted (see individual property docs below).

Extends​

Extended by​

Properties​

children?​

readonly optional children: ReactNode

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

Component content (text, elements, or other components)

Inherited from​

CoreComponentProperties.children

className?​

readonly optional className: string

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

Additional CSS classes for styling customization

Inherited from​

CoreComponentProperties.className

disabled?​

readonly optional disabled: boolean

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

Whether the component is disabled and non-interactive

Inherited from​

CoreComponentProperties.disabled

aria-describedby?​

readonly optional aria-describedby: string

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

ARIA described-by reference for additional descriptions

Inherited from​

AccessibilityProperties.aria-describedby

aria-label?​

readonly optional aria-label: string

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

ARIA label for screen readers

Inherited from​

AccessibilityProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby: string

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

ARIA labelledby reference for complex labeling

Inherited from​

AccessibilityProperties.aria-labelledby

aria-level?​

readonly optional aria-level: number

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

ARIA heading level for elements using role="heading"

Inherited from​

AccessibilityProperties.aria-level

as?​

readonly optional as: BoxElement

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

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

Default Value​

"div";

border?​

readonly optional border: boolean

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

Render a visible border when true.

Default Value​

false;

data-testid?​

readonly optional data-testid: string

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

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

onClick?​

readonly optional onClick: ClickHandler

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

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.

onMouseEnter()?​

readonly optional onMouseEnter: () => void

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

Mouse enter callback.

Returns​

void

onMouseLeave()?​

readonly optional onMouseLeave: () => void

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

Mouse leave callback.

Returns​

void

open?​

readonly optional open: boolean

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

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.

padding?​

readonly optional padding: BoxPadding

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

Padding size variant.

Default Value​

"md";

role?​

readonly optional role: string

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

Explicit ARIA role to apply when the component becomes interactive.

Overrides​

AccessibilityProperties.role

rounded?​

readonly optional rounded: BoxRounded

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

Border radius variant.

Default Value​

"md";

shadow?​

readonly optional shadow: BoxShadow

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

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

style?​

readonly optional style: CSSProperties

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

Inline style object forwarded to the element.

Default Value​

{ } (internal singleton)

surface?​

readonly optional surface: BoxSurface

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

Surface variant used to select contextual surface styles.

Default Value​

"base";

tabIndex?​

readonly optional tabIndex: number

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

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

Overrides​

AccessibilityProperties.tabIndex

variant?​

readonly optional variant: BoxVariant

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

Visual variant used to choose background styling.

Default Value​

"primary";