Skip to main content

Interface: StandardButtonProperties

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

Button-specific properties combining common patterns.

Remarks​

This interface combines the most common props needed for button components, serving as a standard template.

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​

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

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

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

ARIA label for screen readers

Inherited from​

AccessibilityProperties.aria-label

aria-labelledby?​

readonly optional aria-labelledby?: string;

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

ARIA labelledby reference for complex labeling

Inherited from​

AccessibilityProperties.aria-labelledby

aria-level?​

readonly optional aria-level?: number;

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

ARIA heading level for elements using role="heading"

Inherited from​

AccessibilityProperties.aria-level

role?​

readonly optional role?: string;

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

Role attribute for semantic meaning

Inherited from​

AccessibilityProperties.role

tabIndex?​

readonly optional tabIndex?: number;

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

Tab index for keyboard navigation

Inherited from​

AccessibilityProperties.tabIndex

fullWidth?​

readonly optional fullWidth?: boolean;

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

Whether component should take full width of its container

Inherited from​

StylingProperties.fullWidth

size?​

readonly optional size?: ComponentSize;

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

Size variant for the component

Inherited from​

StylingProperties.size

style?​

readonly optional style?: CSSProperties;

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

Inline styles to apply (use sparingly)

Inherited from​

StylingProperties.style

variant?​

readonly optional variant?: ComponentVariant;

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

Visual variant for component theming

Inherited from​

StylingProperties.variant

active?​

readonly optional active?: boolean;

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

Whether the component is in an active state

Inherited from​

StateProperties.active

loading?​

readonly optional loading?: boolean;

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

Whether the component is in a loading state

Inherited from​

StateProperties.loading

selected?​

readonly optional selected?: boolean;

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

Whether the component is selected

Inherited from​

StateProperties.selected

icon?​

readonly optional icon?: ReactNode;

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

Icon element to display

Inherited from​

IconProperties.icon

iconColor?​

readonly optional iconColor?: string;

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

Color theme for the icon

Inherited from​

IconProperties.iconColor

iconOnly?​

readonly optional iconOnly?: boolean;

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

Whether to show only the icon (hide text content)

Inherited from​

IconProperties.iconOnly

iconPosition?​

readonly optional iconPosition?: "left" | "right";

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

Position of the icon relative to content

Inherited from​

IconProperties.iconPosition

form?​

readonly optional form?: string;

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

Optional form id to associate the button with an external <form>.

Remarks​

This enables submit/reset buttons to live outside the form element (e.g. in a dialog footer) while still triggering form submission.

onClick?​

readonly optional onClick?: ClickFlexibleHandler<HTMLButtonElement>;

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

Click handler for button interactions.

onKeyDown?​

readonly optional onKeyDown?: KeyPressHandler<HTMLButtonElement>;

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

Key down handler for keyboard interactions (e.g., arrow-key tab navigation).

title?​

readonly optional title?: string;

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

Tooltip text for hover states

type?​

readonly optional type?: "button" | "reset" | "submit";

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

HTML button type

value?​

readonly optional value?: string;

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

Optional string value assigned to the underlying HTML button.

Remarks​

This is useful when a shared click handler needs to identify which button was clicked without relying on data-* attributes.