Skip to main content

Interface: ThemedBoxProperties

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

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).

Hierarchy​

View Summary

Extends​

Extended by​

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​

CoreComponentProperties.children

className?​

readonly optional className?: string

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

Additional CSS classes for styling customization

Inherited from​

CoreComponentProperties.className

disabled?​

readonly optional disabled?: boolean

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

Whether the component is disabled and non-interactive

Inherited from​

CoreComponentProperties.disabled

id?​

readonly optional id?: string

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

Optional DOM id forwarded to the underlying element.

Inherited from​

DomIdentityProperties.id

aria-describedby?​

readonly optional aria-describedby?: string

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

ARIA described-by reference for additional descriptions

Inherited from​

AccessibilityProperties.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​

AccessibilityProperties.aria-disabled

aria-label?​

readonly optional aria-label?: string

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

ARIA label for screen readers

Inherited from​

AccessibilityProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby?: string

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

ARIA labelledby reference for complex labeling

Inherited from​

AccessibilityProperties.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​

AccessibilityProperties.aria-level

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";

border?​

readonly optional border?: boolean

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

Render a visible border when true.

Default Value​

false;

data-testid?​

readonly optional data-testid?: string

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

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

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.

onMouseEnter?​

readonly optional onMouseEnter?: () => void

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

Mouse enter callback.

Returns​

void

onMouseLeave?​

readonly optional onMouseLeave?: () => void

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

Mouse leave callback.

Returns​

void

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.

padding?​

readonly optional padding?: BoxPadding

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

Padding size variant.

Default Value​

"md";

role?​

readonly optional role?: string

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

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

Border radius variant.

Default Value​

"md";

shadow?​

readonly optional shadow?: BoxShadow

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

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

style?​

readonly optional style?: CSSProperties

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

Inline style object forwarded to the element.

Default Value​

{ } (internal singleton)

surface?​

readonly optional surface?: BoxSurface

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

Surface variant used to select contextual surface styles.

Default Value​

"base";

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.

Overrides​

AccessibilityProperties.tabIndex

variant?​

readonly optional variant?: BoxVariant

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

Visual variant used to choose background styling.

Default Value​

"primary";