ButtonProps
The props for the Adaptable Button React component
TypeScript
interfaceProperties
| Property | Description | Default |
|---|---|---|
| "aria-label" | ||
| autoFocus | ||
| children | ||
| className | ||
| color | ||
| disabled | ||
| draggable | ||
| fontSize | ||
| hidden | ||
| icon | ||
| iconPosition | 'start' | |
| iconSize | ||
| m | ||
| mb | ||
| ml | ||
| mr | ||
| mt | ||
| mx | ||
| my | ||
| onClick | ||
| onDragEnd | ||
| onDragStart | ||
| onMouseDown | Should be used very very rarely | |
| onMouseDownCapture | Should be used very very rarely | |
| orientation | ||
| size | ||
| style | ||
| tabIndex | ||
| title | ||
| tooltip | ||
| variant |
Property Details
"aria-label"
TypeScript
['aria-label']?: string;Property Value
string
autoFocus
TypeScript
autoFocus?: boolean;Property Value
boolean
children
TypeScript
children?: React.ReactNode;Property Value
React.ReactNode
className
TypeScript
className?: string;Property Value
string
color
TypeScript
color?: ButtonColor;Property Value
ButtonColor
disabled
TypeScript
disabled?: boolean;Property Value
boolean
draggable
TypeScript
draggable?: boolean;Property Value
boolean
fontSize
TypeScript
fontSize?: 'inherit';Property Value
'inherit'
hidden
TypeScript
hidden?: boolean;Property Value
boolean
icon
TypeScript
icon?: IconName;Property Value
IconName
iconPosition
TypeScript
iconPosition?: 'start' | 'end';Default Value
'start'
Property Value
'start' | 'end'
iconSize
TypeScript
iconSize?: number;Property Value
number
m
TypeScript
m?: TrueSpacing;Property Value
TrueSpacing
mb
TypeScript
mb?: TrueSpacing;Property Value
TrueSpacing
ml
TypeScript
ml?: TrueSpacing;Property Value
TrueSpacing
mr
TypeScript
mr?: TrueSpacing;Property Value
TrueSpacing
mt
TypeScript
mt?: TrueSpacing;Property Value
TrueSpacing
mx
TypeScript
mx?: TrueSpacing;Property Value
TrueSpacing
my
TypeScript
my?: TrueSpacing;Property Value
TrueSpacing
onClick
TypeScript
onClick?: (event: React.MouseEvent) => void;Property Value
(event: React.MouseEvent) => void
onDragEnd
TypeScript
onDragEnd?: (event: React.DragEvent) => void;Property Value
(event: React.DragEvent) => void
onDragStart
TypeScript
onDragStart?: (event: React.DragEvent) => void;Property Value
(event: React.DragEvent) => void
onMouseDown
Should be used very very rarely
TypeScript
onMouseDown?: (event: React.MouseEvent) => void;Property Value
(event: React.MouseEvent) => void
onMouseDownCapture
Should be used very very rarely
TypeScript
onMouseDownCapture?: (event: React.MouseEvent) => void;Property Value
(event: React.MouseEvent) => void
orientation
TypeScript
orientation?: 'vertical' | 'horizontal';Property Value
'vertical' | 'horizontal'
size
TypeScript
size?: 'small' | 'medium' | 'large';Property Value
'small' | 'medium' | 'large'
style
TypeScript
style?: React.CSSProperties;Property Value
React.CSSProperties
tabIndex
TypeScript
tabIndex?: number;Property Value
number
title
TypeScript
title?: string;Property Value
string
tooltip
TypeScript
tooltip?: string;Property Value
string
variant
TypeScript
variant?: ButtonVariant;Property Value
ButtonVariant