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​

Properties​

children?​

readonly optional children: ReactNode

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

Component content (text, elements, or other components)

Inherited from​

CoreComponentProperties.children

className?​

readonly optional className: string

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

Additional CSS classes for styling customization

Inherited from​

CoreComponentProperties.className

disabled?​

readonly optional disabled: boolean

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

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

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

ARIA label for screen readers

Inherited from​

AccessibilityProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby: string

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

ARIA labelledby reference for complex labeling

Inherited from​

AccessibilityProperties.aria-labelledby

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;

onClick?​

readonly optional onClick: ClickHandler

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

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

Mouse enter callback.

Returns​

void

onMouseLeave()?​

readonly optional onMouseLeave: () => void

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

Mouse leave callback.

Returns​

void

padding?​

readonly optional padding: BoxPadding

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

Padding size variant.

Default Value​

"md";

role?​

readonly optional role: string

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

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

Border radius variant.

Default Value​

"md";

shadow?​

readonly optional shadow: BoxShadow

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

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

style?​

readonly optional style: CSSProperties

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

Inline style object forwarded to the element.

Default Value​

{ } (internal singleton)

surface?​

readonly optional surface: BoxSurface

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

Surface variant used to select contextual surface styles.

Default Value​

"base";

tabIndex?​

readonly optional tabIndex: number

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

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

Visual variant used to choose background styling.

Default Value​

"primary";