ButtonGroup

Groups a collection of similar actions together.

When to use

  • If you need to emphasize context of similar actions.
  • If a single option or multiple options of the set may be selected.

Button group basic usage



Button group with radio mode

Button group with checkbox mode

Button group with disabled buttons

All disabled

Single disabled

Button group controlled example

Lorem ipsum dolor sit amet, ea insolens deseruisse mnesarchum mea. An munere utroque mentitum vis, ea rebum inani iudicabit has. Cu his dolorum perpetua. Mea atqui tation partem ne, ei vim etiam volumus nominavi. Cum id atqui cotidieque, quaeque nostrum salutandi cum at, idque scaevola platonem mei ad.
The Bold option has been selected 0 times

Button group with dropdown

Overrides

Additionally, you can fully customize any part of the ButtonGroup through the overrides prop. The ButtonGroup consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

ButtonGroup API

ariaLabel string

Accessible label.

children Array<Node> required

Set of more than one Button components

ArrayNode

disabled boolean = false

Defines if the button group is disabled.

mode $Values<typeof MODE>

Use the mode prop to render toggleable Buttons: the value radio will cause Buttons to behave like radio buttons, the value checkbox will cause Buttons to behave like checkboxes.

$ValuesObject.freeze({ radio: "radio", checkbox: "checkbox" })

onClick function = () => undefined

Called with click events from children. If a child button has its own click handler, the local handler will be called first, then this handler will trigger.

function
SyntheticEventHTMLButtonElement,
number
=> mixed

overrides { Root: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }<object>

{ Root: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }
$theme required
name string required
breakpoints required
small number required
medium number required
large number required
colors required
primary50 string required
primary100 string required
primary200 string required
primary300 string required
primary400 string required
primary string required
primary500 string required
primary600 string required
primary700 string required
negative50 string required
negative100 string required
negative200 string required
negative300 string required
negative400 string required
negative string required
negative500 string required
negative600 string required
negative700 string required
warning50 string required
warning100 string required
warning200 string required
warning300 string required
warning400 string required
warning string required
warning500 string required
warning600 string required
warning700 string required
positive50 string required
positive100 string required
positive200 string required
positive300 string required
positive400 string required
positive string required
positive500 string required
positive600 string required
positive700 string required
white string required
mono100 string required
mono200 string required
mono300 string required
mono400 string required
mono500 string required
mono600 string required
mono700 string required
mono800 string required
mono900 string required
mono1000 string required
black string required
rating200 string required
rating400 string required
colorPrimary string required
colorSecondary string required
background string required
backgroundAlt string required
backgroundInv string required
foreground string required
foregroundAlt string required
foregroundInv string required
border string required
borderAlt string required
borderFocus string required
borderError string required
buttonPrimaryFill string required
buttonPrimaryText string required
buttonPrimaryHover string required
buttonPrimaryActive string required
buttonSecondaryFill string required
buttonSecondaryText string required
buttonSecondaryHover string required
buttonSecondaryActive string required
buttonTertiaryFill string required
buttonTertiaryText string required
buttonTertiaryHover string required
buttonTertiaryActive string required
buttonTertiarySelectedText string required
buttonTertiarySelectedFill string required
buttonMinimalFill string required
buttonMinimalText string required
buttonMinimalHover string required
buttonMinimalActive string required
buttonDisabledFill string required
buttonDisabledText string required
breadcrumbsText string required
breadcrumbsSeparatorFill string required
datepickerBackground string required
datepickerDayFont string required
datepickerDayFontDisabled string required
datepickerDayPseudoSelected string required
datepickerDayPseudoHighlighted string required
fileUploaderBackgroundColor string required
fileUploaderBackgroundColorActive string required
fileUploaderBorderColorActive string required
fileUploaderBorderColorDefault string required
fileUploaderMessageColor string required
linkText string required
linkVisited string required
linkHover string required
linkActive string required
listHeaderFill string required
listBodyFill string required
listIconFill string required
listBorder string required
progressStepsIconActiveFill string required
tickFill string required
tickFillHover string required
tickFillActive string required
tickFillSelected string required
tickFillSelectedHover string required
tickFillSelectedHoverActive string required
tickFillError string required
tickFillErrorHover string required
tickFillErrorHoverActive string required
tickFillErrorSelected string required
tickFillErrorSelectedHover string required
tickFillErrorSelectedHoverActive string required
tickFillDisabled string required
tickBorder string required
tickBorderError string required
tickMarkFill string required
sliderTrackFill string required
sliderTrackFillHover string required
sliderTrackFillActive string required
sliderTrackFillSelected string required
sliderTrackFillSelectedHover string required
sliderTrackFillSelectedActive string required
sliderTrackFillDisabled string required
sliderHandleFill string required
sliderHandleFillHover string required
sliderHandleFillActive string required
sliderHandleFillSelected string required
sliderHandleFillSelectedHover string required
sliderHandleFillSelectedActive string required
sliderHandleFillDisabled string required
sliderHandleInnerFill string required
sliderHandleInnerFillDisabled string required
sliderHandleInnerFillSelectedHover string required
sliderHandleInnerFillSelectedActive string required
sliderBorder string required
sliderBorderHover string required
sliderBorderDisabled string required
inputFill string required
inputFillError string required
inputFillDisabled string required
inputTextDisabled string required
notificationPrimaryBackground string required
notificationPrimaryText string required
notificationPositiveBackground string required
notificationPositiveText string required
notificationWarningBackground string required
notificationWarningText string required
notificationNegativeBackground string required
notificationNegativeText string required
menuFill string required
menuFillHover string required
menuFontDefault string required
menuFontDisabled string required
menuFontHighlighted string required
menuFontSelected string required
paginationTriangleDown string required
headerNavigationFill string required
tabBarFill string required
tabColor string required
shadowFocus string required
shadowError string required
tagBackground string required
tagNeutralBackground string required
tagPrimaryBackground string required
tagPositiveBackground string required
tagWarningBackground string required
tagNegativeBackground string required
tagRGBGradient string required
tagRGBGradientSecondary string required
tagSolidRampUnit string required
tagSolidHoverRampUnit string required
tagSolidActiveRampUnit string required
tagSolidDisabledRampUnit string required
tagSolidFontRampUnit string required
tagSolidFontHoverRampUnit string required
tagLightRampUnit string required
tagLightHoverRampUnit string required
tagLightActiveRampUnit string required
tagLightDisabledRampUnit string required
tagLightFontRampUnit string required
tagLightFontHoverRampUnit string required
tagOutlinedRampUnit string required
tagOutlinedHoverRampUnit string required
tagOutlinedActiveRampUnit string required
tagOutlinedDisabledRampUnit string required
tagOutlinedFontRampUnit string required
tagOutlinedFontHoverRampUnit string required
tagFontDisabledRampUnit string required
tagNeutralSolidBackground string required
tagNeutralSolidHover string required
tagNeutralSolidActive string required
tagNeutralSolidDisabled string required
tagNeutralSolidFont string required
tagNeutralSolidFontHover string required
tagNeutralLightBackground string required
tagNeutralLightHover string required
tagNeutralLightActive string required
tagNeutralLightDisabled string required
tagNeutralLightFont string required
tagNeutralLightFontHover string required
tagNeutralOutlinedBackground string required
tagNeutralOutlinedHover string required
tagNeutralOutlinedActive string required
tagNeutralOutlinedDisabled string required
tagNeutralOutlinedFont string required
tagNeutralOutlinedFontHover string required
tagNeutralFontDisabled string required
tagPrimarySolidBackground string required
tagPrimarySolidHover string required
tagPrimarySolidActive string required
tagPrimarySolidDisabled string required
tagPrimarySolidFont string required
tagPrimarySolidFontHover string required
tagPrimaryLightBackground string required
tagPrimaryLightHover string required
tagPrimaryLightActive string required
tagPrimaryLightDisabled string required
tagPrimaryLightFont string required
tagPrimaryLightFontHover string required
tagPrimaryOutlinedBackground string required
tagPrimaryOutlinedHover string required
tagPrimaryOutlinedActive string required
tagPrimaryOutlinedDisabled string required
tagPrimaryOutlinedFont string required
tagPrimaryOutlinedFontHover string required
tagPrimaryFontDisabled string required
tagPositiveSolidBackground string required
tagPositiveSolidHover string required
tagPositiveSolidActive string required
tagPositiveSolidDisabled string required
tagPositiveSolidFont string required
tagPositiveSolidFontHover string required
tagPositiveLightBackground string required
tagPositiveLightHover string required
tagPositiveLightActive string required
tagPositiveLightDisabled string required
tagPositiveLightFont string required
tagPositiveLightFontHover string required
tagPositiveOutlinedBackground string required
tagPositiveOutlinedHover string required
tagPositiveOutlinedActive string required
tagPositiveOutlinedDisabled string required
tagPositiveOutlinedFont string required
tagPositiveOutlinedFontHover string required
tagPositiveFontDisabled string required
tagWarningSolidBackground string required
tagWarningSolidHover string required
tagWarningSolidActive string required
tagWarningSolidDisabled string required
tagWarningSolidFont string required
tagWarningSolidFontHover string required
tagWarningLightBackground string required
tagWarningLightHover string required
tagWarningLightActive string required
tagWarningLightDisabled string required
tagWarningLightFont string required
tagWarningLightFontHover string required
tagWarningOutlinedBackground string required
tagWarningOutlinedHover string required
tagWarningOutlinedActive string required
tagWarningOutlinedDisabled string required
tagWarningOutlinedFont string required
tagWarningOutlinedFontHover string required
tagWarningFontDisabled string required
tagNegativeSolidBackground string required
tagNegativeSolidHover string required
tagNegativeSolidActive string required
tagNegativeSolidDisabled string required
tagNegativeSolidFont string required
tagNegativeSolidFontHover string required
tagNegativeLightBackground string required
tagNegativeLightHover string required
tagNegativeLightActive string required
tagNegativeLightDisabled string required
tagNegativeLightFont string required
tagNegativeLightFontHover string required
tagNegativeOutlinedBackground string required
tagNegativeOutlinedHover string required
tagNegativeOutlinedActive string required
tagNegativeOutlinedDisabled string required
tagNegativeOutlinedFont string required
tagNegativeOutlinedFontHover string required
tagNegativeFontDisabled string required
tableHeadBackgroundColor string required
tableBackground string required
tableFilter string required
tableFilterHeading string required
tableFilterBackground string required
tableFilterFooterBackground string required
toastText string required
toastPrimaryBackground string required
toastPositiveBackground string required
toastWarningBackground string required
toastNegativeBackground string required
spinnerTrackFill string required
progressbarTrackFill string required
tooltipBackground string required
tooltipText string required
typography required
font100 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font200 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font250 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font300 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font350 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font400 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font450 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font500 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font600 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font700 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font800 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font900 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font1000 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
sizing required
scale0 string required
scale100 string required
scale200 string required
scale300 string required
scale400 string required
scale500 string required
scale550 string required
scale600 string required
scale700 string required
scale800 string required
scale900 string required
scale1000 string required
scale1200 string required
scale1400 string required
scale1600 string required
scale2400 string required
scale3200 string required
scale4800 string required
lighting required
shadow400 string required
shadow500 string required
shadow600 string required
shadow700 string required
overlay0 string required
overlay100 string required
overlay200 string required
overlay300 string required
overlay400 string required
overlay500 string required
overlay600 string required
animation required
timing100 string required
timing400 string required
timing700 string required
easeOutCurve string required
easeInCurve string required
easeInOutCurve string required
borders required
border100 required
borderColor string required
borderStyle string required
borderWidth string required
border200 required
borderColor string required
borderStyle string required
borderWidth string required
border300 required
borderColor string required
borderStyle string required
borderWidth string required
border400 required
borderColor string required
borderStyle string required
borderWidth string required
border500 required
borderColor string required
borderStyle string required
borderWidth string required
border600 required
borderColor string required
borderStyle string required
borderWidth string required
useRoundedCorners boolean required
radius100 string required
radius200 string required
radius300 string required
zIndex required
modal number required
icons
Alert react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowDown react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowUp react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
CheckIndeterminate react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Check react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ChevronLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ChevronRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
DeleteAlt react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Delete react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Filter react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Grab react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Menu react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Overflow react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Plus react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Search react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Spinner react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleDown react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleUp react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Upload react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
tooltip object required
backgroundColor string required

selected union

Index or array of indices of the selected Button(s). Primarily for use with controlled components with a mode prop defined.

One of
number,
Arraynumber

shape $Values<typeof SHAPE> =

Defines the shape of the buttons in the button group.

$Values{ default: "default", round: "round", square: "square" }

size $Values<typeof SIZE> =

Defines the size of the buttons in the button group.

$Values{ default: "default", compact: "compact" }

Stateful ButtonGroup API

Stateful Container API

... $Diff<object, object> required

$Diff
ariaLabel string
children required ArrayNode
disabled boolean
mode $ValuesObject.freeze({ radio: "radio", checkbox: "checkbox" })
onClick function
SyntheticEventHTMLButtonElement,
number
=> mixed
overrides { Root: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }
$theme required
name string required
breakpoints required
small number required
medium number required
large number required
colors required
primary50 string required
primary100 string required
primary200 string required
primary300 string required
primary400 string required
primary string required
primary500 string required
primary600 string required
primary700 string required
negative50 string required
negative100 string required
negative200 string required
negative300 string required
negative400 string required
negative string required
negative500 string required
negative600 string required
negative700 string required
warning50 string required
warning100 string required
warning200 string required
warning300 string required
warning400 string required
warning string required
warning500 string required
warning600 string required
warning700 string required
positive50 string required
positive100 string required
positive200 string required
positive300 string required
positive400 string required
positive string required
positive500 string required
positive600 string required
positive700 string required
white string required
mono100 string required
mono200 string required
mono300 string required
mono400 string required
mono500 string required
mono600 string required
mono700 string required
mono800 string required
mono900 string required
mono1000 string required
black string required
rating200 string required
rating400 string required
colorPrimary string required
colorSecondary string required
background string required
backgroundAlt string required
backgroundInv string required
foreground string required
foregroundAlt string required
foregroundInv string required
border string required
borderAlt string required
borderFocus string required
borderError string required
buttonPrimaryFill string required
buttonPrimaryText string required
buttonPrimaryHover string required
buttonPrimaryActive string required
buttonSecondaryFill string required
buttonSecondaryText string required
buttonSecondaryHover string required
buttonSecondaryActive string required
buttonTertiaryFill string required
buttonTertiaryText string required
buttonTertiaryHover string required
buttonTertiaryActive string required
buttonTertiarySelectedText string required
buttonTertiarySelectedFill string required
buttonMinimalFill string required
buttonMinimalText string required
buttonMinimalHover string required
buttonMinimalActive string required
buttonDisabledFill string required
buttonDisabledText string required
breadcrumbsText string required
breadcrumbsSeparatorFill string required
datepickerBackground string required
datepickerDayFont string required
datepickerDayFontDisabled string required
datepickerDayPseudoSelected string required
datepickerDayPseudoHighlighted string required
fileUploaderBackgroundColor string required
fileUploaderBackgroundColorActive string required
fileUploaderBorderColorActive string required
fileUploaderBorderColorDefault string required
fileUploaderMessageColor string required
linkText string required
linkVisited string required
linkHover string required
linkActive string required
listHeaderFill string required
listBodyFill string required
listIconFill string required
listBorder string required
progressStepsIconActiveFill string required
tickFill string required
tickFillHover string required
tickFillActive string required
tickFillSelected string required
tickFillSelectedHover string required
tickFillSelectedHoverActive string required
tickFillError string required
tickFillErrorHover string required
tickFillErrorHoverActive string required
tickFillErrorSelected string required
tickFillErrorSelectedHover string required
tickFillErrorSelectedHoverActive string required
tickFillDisabled string required
tickBorder string required
tickBorderError string required
tickMarkFill string required
sliderTrackFill string required
sliderTrackFillHover string required
sliderTrackFillActive string required
sliderTrackFillSelected string required
sliderTrackFillSelectedHover string required
sliderTrackFillSelectedActive string required
sliderTrackFillDisabled string required
sliderHandleFill string required
sliderHandleFillHover string required
sliderHandleFillActive string required
sliderHandleFillSelected string required
sliderHandleFillSelectedHover string required
sliderHandleFillSelectedActive string required
sliderHandleFillDisabled string required
sliderHandleInnerFill string required
sliderHandleInnerFillDisabled string required
sliderHandleInnerFillSelectedHover string required
sliderHandleInnerFillSelectedActive string required
sliderBorder string required
sliderBorderHover string required
sliderBorderDisabled string required
inputFill string required
inputFillError string required
inputFillDisabled string required
inputTextDisabled string required
notificationPrimaryBackground string required
notificationPrimaryText string required
notificationPositiveBackground string required
notificationPositiveText string required
notificationWarningBackground string required
notificationWarningText string required
notificationNegativeBackground string required
notificationNegativeText string required
menuFill string required
menuFillHover string required
menuFontDefault string required
menuFontDisabled string required
menuFontHighlighted string required
menuFontSelected string required
paginationTriangleDown string required
headerNavigationFill string required
tabBarFill string required
tabColor string required
shadowFocus string required
shadowError string required
tagBackground string required
tagNeutralBackground string required
tagPrimaryBackground string required
tagPositiveBackground string required
tagWarningBackground string required
tagNegativeBackground string required
tagRGBGradient string required
tagRGBGradientSecondary string required
tagSolidRampUnit string required
tagSolidHoverRampUnit string required
tagSolidActiveRampUnit string required
tagSolidDisabledRampUnit string required
tagSolidFontRampUnit string required
tagSolidFontHoverRampUnit string required
tagLightRampUnit string required
tagLightHoverRampUnit string required
tagLightActiveRampUnit string required
tagLightDisabledRampUnit string required
tagLightFontRampUnit string required
tagLightFontHoverRampUnit string required
tagOutlinedRampUnit string required
tagOutlinedHoverRampUnit string required
tagOutlinedActiveRampUnit string required
tagOutlinedDisabledRampUnit string required
tagOutlinedFontRampUnit string required
tagOutlinedFontHoverRampUnit string required
tagFontDisabledRampUnit string required
tagNeutralSolidBackground string required
tagNeutralSolidHover string required
tagNeutralSolidActive string required
tagNeutralSolidDisabled string required
tagNeutralSolidFont string required
tagNeutralSolidFontHover string required
tagNeutralLightBackground string required
tagNeutralLightHover string required
tagNeutralLightActive string required
tagNeutralLightDisabled string required
tagNeutralLightFont string required
tagNeutralLightFontHover string required
tagNeutralOutlinedBackground string required
tagNeutralOutlinedHover string required
tagNeutralOutlinedActive string required
tagNeutralOutlinedDisabled string required
tagNeutralOutlinedFont string required
tagNeutralOutlinedFontHover string required
tagNeutralFontDisabled string required
tagPrimarySolidBackground string required
tagPrimarySolidHover string required
tagPrimarySolidActive string required
tagPrimarySolidDisabled string required
tagPrimarySolidFont string required
tagPrimarySolidFontHover string required
tagPrimaryLightBackground string required
tagPrimaryLightHover string required
tagPrimaryLightActive string required
tagPrimaryLightDisabled string required
tagPrimaryLightFont string required
tagPrimaryLightFontHover string required
tagPrimaryOutlinedBackground string required
tagPrimaryOutlinedHover string required
tagPrimaryOutlinedActive string required
tagPrimaryOutlinedDisabled string required
tagPrimaryOutlinedFont string required
tagPrimaryOutlinedFontHover string required
tagPrimaryFontDisabled string required
tagPositiveSolidBackground string required
tagPositiveSolidHover string required
tagPositiveSolidActive string required
tagPositiveSolidDisabled string required
tagPositiveSolidFont string required
tagPositiveSolidFontHover string required
tagPositiveLightBackground string required
tagPositiveLightHover string required
tagPositiveLightActive string required
tagPositiveLightDisabled string required
tagPositiveLightFont string required
tagPositiveLightFontHover string required
tagPositiveOutlinedBackground string required
tagPositiveOutlinedHover string required
tagPositiveOutlinedActive string required
tagPositiveOutlinedDisabled string required
tagPositiveOutlinedFont string required
tagPositiveOutlinedFontHover string required
tagPositiveFontDisabled string required
tagWarningSolidBackground string required
tagWarningSolidHover string required
tagWarningSolidActive string required
tagWarningSolidDisabled string required
tagWarningSolidFont string required
tagWarningSolidFontHover string required
tagWarningLightBackground string required
tagWarningLightHover string required
tagWarningLightActive string required
tagWarningLightDisabled string required
tagWarningLightFont string required
tagWarningLightFontHover string required
tagWarningOutlinedBackground string required
tagWarningOutlinedHover string required
tagWarningOutlinedActive string required
tagWarningOutlinedDisabled string required
tagWarningOutlinedFont string required
tagWarningOutlinedFontHover string required
tagWarningFontDisabled string required
tagNegativeSolidBackground string required
tagNegativeSolidHover string required
tagNegativeSolidActive string required
tagNegativeSolidDisabled string required
tagNegativeSolidFont string required
tagNegativeSolidFontHover string required
tagNegativeLightBackground string required
tagNegativeLightHover string required
tagNegativeLightActive string required
tagNegativeLightDisabled string required
tagNegativeLightFont string required
tagNegativeLightFontHover string required
tagNegativeOutlinedBackground string required
tagNegativeOutlinedHover string required
tagNegativeOutlinedActive string required
tagNegativeOutlinedDisabled string required
tagNegativeOutlinedFont string required
tagNegativeOutlinedFontHover string required
tagNegativeFontDisabled string required
tableHeadBackgroundColor string required
tableBackground string required
tableFilter string required
tableFilterHeading string required
tableFilterBackground string required
tableFilterFooterBackground string required
toastText string required
toastPrimaryBackground string required
toastPositiveBackground string required
toastWarningBackground string required
toastNegativeBackground string required
spinnerTrackFill string required
progressbarTrackFill string required
tooltipBackground string required
tooltipText string required
typography required
font100 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font200 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font250 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font300 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font350 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font400 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font450 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font500 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font600 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font700 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font800 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font900 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
font1000 required
fontFamily string required
fontWeight union required One of
string,
number
fontSize string required
lineHeight union required One of
string,
number
sizing required
scale0 string required
scale100 string required
scale200 string required
scale300 string required
scale400 string required
scale500 string required
scale550 string required
scale600 string required
scale700 string required
scale800 string required
scale900 string required
scale1000 string required
scale1200 string required
scale1400 string required
scale1600 string required
scale2400 string required
scale3200 string required
scale4800 string required
lighting required
shadow400 string required
shadow500 string required
shadow600 string required
shadow700 string required
overlay0 string required
overlay100 string required
overlay200 string required
overlay300 string required
overlay400 string required
overlay500 string required
overlay600 string required
animation required
timing100 string required
timing400 string required
timing700 string required
easeOutCurve string required
easeInCurve string required
easeInOutCurve string required
borders required
border100 required
borderColor string required
borderStyle string required
borderWidth string required
border200 required
borderColor string required
borderStyle string required
borderWidth string required
border300 required
borderColor string required
borderStyle string required
borderWidth string required
border400 required
borderColor string required
borderStyle string required
borderWidth string required
border500 required
borderColor string required
borderStyle string required
borderWidth string required
border600 required
borderColor string required
borderStyle string required
borderWidth string required
useRoundedCorners boolean required
radius100 string required
radius200 string required
radius300 string required
zIndex required
modal number required
icons
Alert react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowDown react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ArrowUp react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
CheckIndeterminate react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Check react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ChevronLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
ChevronRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
DeleteAlt react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Delete react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Filter react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Grab react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Menu react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Overflow react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Plus react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Search react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Spinner react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleDown react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleLeft react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleRight react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
TriangleUp react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
Upload react.ComponentType
children Node
size One of
number,
string
color string
title string
overrides
Svg { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>
$size One of
number,
string
$color string
$as string
$style nullable Object
$ref Ref*
tooltip object required
backgroundColor string required
selected union One of
number,
Arraynumber
shape $Values{ default: "default", round: "round", square: "square" }
size $Values{ default: "default", compact: "compact" }
initialState object
selected union required One of
number,
Arraynumber
stateReducer function
$ValuesObject.freeze({ change: "change" }),
selected required Arraynumber
,
selected required Arraynumber
=>
selected required Arraynumber
,
selected mixed required

children function required

...$Diff<{ ariaLabel: string, children: Array<Node>, disabled: boolean, mode: $Values<typeof MODE>, onClick: (SyntheticEvent<HTMLButtonElement>, number) => mixed, overrides: { Root: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><<T>> }<{ $theme: { name: string, breakpoints: { small: number, medium: number, large: number }, colors: { primary50: string, primary100: string, primary200: string, primary300: string, primary400: string, primary: string, primary500: string, primary600: string, primary700: string, negative50: string, negative100: string, negative200: string, negative300: string, negative400: string, negative: string, negative500: string, negative600: string, negative700: string, warning50: string, warning100: string, warning200: string, warning300: string, warning400: string, warning: string, warning500: string, warning600: string, warning700: string, positive50: string, positive100: string, positive200: string, positive300: string, positive400: string, positive: string, positive500: string, positive600: string, positive700: string, white: string, mono100: string, mono200: string, mono300: string, mono400: string, mono500: string, mono600: string, mono700: string, mono800: string, mono900: string, mono1000: string, black: string, rating200: string, rating400: string, colorPrimary: string, colorSecondary: string, background: string, backgroundAlt: string, backgroundInv: string, foreground: string, foregroundAlt: string, foregroundInv: string, border: string, borderAlt: string, borderFocus: string, borderError: string, buttonPrimaryFill: string, buttonPrimaryText: string, buttonPrimaryHover: string, buttonPrimaryActive: string, buttonSecondaryFill: string, buttonSecondaryText: string, buttonSecondaryHover: string, buttonSecondaryActive: string, buttonTertiaryFill: string, buttonTertiaryText: string, buttonTertiaryHover: string, buttonTertiaryActive: string, buttonTertiarySelectedText: string, buttonTertiarySelectedFill: string, buttonMinimalFill: string, buttonMinimalText: string, buttonMinimalHover: string, buttonMinimalActive: string, buttonDisabledFill: string, buttonDisabledText: string, breadcrumbsText: string, breadcrumbsSeparatorFill: string, datepickerBackground: string, datepickerDayFont: string, datepickerDayFontDisabled: string, datepickerDayPseudoSelected: string, datepickerDayPseudoHighlighted: string, fileUploaderBackgroundColor: string, fileUploaderBackgroundColorActive: string, fileUploaderBorderColorActive: string, fileUploaderBorderColorDefault: string, fileUploaderMessageColor: string, linkText: string, linkVisited: string, linkHover: string, linkActive: string, listHeaderFill: string, listBodyFill: string, listIconFill: string, listBorder: string, progressStepsIconActiveFill: string, tickFill: string, tickFillHover: string, tickFillActive: string, tickFillSelected: string, tickFillSelectedHover: string, tickFillSelectedHoverActive: string, tickFillError: string, tickFillErrorHover: string, tickFillErrorHoverActive: string, tickFillErrorSelected: string, tickFillErrorSelectedHover: string, tickFillErrorSelectedHoverActive: string, tickFillDisabled: string, tickBorder: string, tickBorderError: string, tickMarkFill: string, sliderTrackFill: string, sliderTrackFillHover: string, sliderTrackFillActive: string, sliderTrackFillSelected: string, sliderTrackFillSelectedHover: string, sliderTrackFillSelectedActive: string, sliderTrackFillDisabled: string, sliderHandleFill: string, sliderHandleFillHover: string, sliderHandleFillActive: string, sliderHandleFillSelected: string, sliderHandleFillSelectedHover: string, sliderHandleFillSelectedActive: string, sliderHandleFillDisabled: string, sliderHandleInnerFill: string, sliderHandleInnerFillDisabled: string, sliderHandleInnerFillSelectedHover: string, sliderHandleInnerFillSelectedActive: string, sliderBorder: string, sliderBorderHover: string, sliderBorderDisabled: string, inputFill: string, inputFillError: string, inputFillDisabled: string, inputTextDisabled: string, notificationPrimaryBackground: string, notificationPrimaryText: string, notificationPositiveBackground: string, notificationPositiveText: string, notificationWarningBackground: string, notificationWarningText: string, notificationNegativeBackground: string, notificationNegativeText: string, menuFill: string, menuFillHover: string, menuFontDefault: string, menuFontDisabled: string, menuFontHighlighted: string, menuFontSelected: string, paginationTriangleDown: string, headerNavigationFill: string, tabBarFill: string, tabColor: string, shadowFocus: string, shadowError: string, tagBackground: string, tagNeutralBackground: string, tagPrimaryBackground: string, tagPositiveBackground: string, tagWarningBackground: string, tagNegativeBackground: string, tagRGBGradient: string, tagRGBGradientSecondary: string, tagSolidRampUnit: string, tagSolidHoverRampUnit: string, tagSolidActiveRampUnit: string, tagSolidDisabledRampUnit: string, tagSolidFontRampUnit: string, tagSolidFontHoverRampUnit: string, tagLightRampUnit: string, tagLightHoverRampUnit: string, tagLightActiveRampUnit: string, tagLightDisabledRampUnit: string, tagLightFontRampUnit: string, tagLightFontHoverRampUnit: string, tagOutlinedRampUnit: string, tagOutlinedHoverRampUnit: string, tagOutlinedActiveRampUnit: string, tagOutlinedDisabledRampUnit: string, tagOutlinedFontRampUnit: string, tagOutlinedFontHoverRampUnit: string, tagFontDisabledRampUnit: string, tagNeutralSolidBackground: string, tagNeutralSolidHover: string, tagNeutralSolidActive: string, tagNeutralSolidDisabled: string, tagNeutralSolidFont: string, tagNeutralSolidFontHover: string, tagNeutralLightBackground: string, tagNeutralLightHover: string, tagNeutralLightActive: string, tagNeutralLightDisabled: string, tagNeutralLightFont: string, tagNeutralLightFontHover: string, tagNeutralOutlinedBackground: string, tagNeutralOutlinedHover: string, tagNeutralOutlinedActive: string, tagNeutralOutlinedDisabled: string, tagNeutralOutlinedFont: string, tagNeutralOutlinedFontHover: string, tagNeutralFontDisabled: string, tagPrimarySolidBackground: string, tagPrimarySolidHover: string, tagPrimarySolidActive: string, tagPrimarySolidDisabled: string, tagPrimarySolidFont: string, tagPrimarySolidFontHover: string, tagPrimaryLightBackground: string, tagPrimaryLightHover: string, tagPrimaryLightActive: string, tagPrimaryLightDisabled: string, tagPrimaryLightFont: string, tagPrimaryLightFontHover: string, tagPrimaryOutlinedBackground: string, tagPrimaryOutlinedHover: string, tagPrimaryOutlinedActive: string, tagPrimaryOutlinedDisabled: string, tagPrimaryOutlinedFont: string, tagPrimaryOutlinedFontHover: string, tagPrimaryFontDisabled: string, tagPositiveSolidBackground: string, tagPositiveSolidHover: string, tagPositiveSolidActive: string, tagPositiveSolidDisabled: string, tagPositiveSolidFont: string, tagPositiveSolidFontHover: string, tagPositiveLightBackground: string, tagPositiveLightHover: string, tagPositiveLightActive: string, tagPositiveLightDisabled: string, tagPositiveLightFont: string, tagPositiveLightFontHover: string, tagPositiveOutlinedBackground: string, tagPositiveOutlinedHover: string, tagPositiveOutlinedActive: string, tagPositiveOutlinedDisabled: string, tagPositiveOutlinedFont: string, tagPositiveOutlinedFontHover: string, tagPositiveFontDisabled: string, tagWarningSolidBackground: string, tagWarningSolidHover: string, tagWarningSolidActive: string, tagWarningSolidDisabled: string, tagWarningSolidFont: string, tagWarningSolidFontHover: string, tagWarningLightBackground: string, tagWarningLightHover: string, tagWarningLightActive: string, tagWarningLightDisabled: string, tagWarningLightFont: string, tagWarningLightFontHover: string, tagWarningOutlinedBackground: string, tagWarningOutlinedHover: string, tagWarningOutlinedActive: string, tagWarningOutlinedDisabled: string, tagWarningOutlinedFont: string, tagWarningOutlinedFontHover: string, tagWarningFontDisabled: string, tagNegativeSolidBackground: string, tagNegativeSolidHover: string, tagNegativeSolidActive: string, tagNegativeSolidDisabled: string, tagNegativeSolidFont: string, tagNegativeSolidFontHover: string, tagNegativeLightBackground: string, tagNegativeLightHover: string, tagNegativeLightActive: string, tagNegativeLightDisabled: string, tagNegativeLightFont: string, tagNegativeLightFontHover: string, tagNegativeOutlinedBackground: string, tagNegativeOutlinedHover: string, tagNegativeOutlinedActive: string, tagNegativeOutlinedDisabled: string, tagNegativeOutlinedFont: string, tagNegativeOutlinedFontHover: string, tagNegativeFontDisabled: string, tableHeadBackgroundColor: string, tableBackground: string, tableFilter: string, tableFilterHeading: string, tableFilterBackground: string, tableFilterFooterBackground: string, toastText: string, toastPrimaryBackground: string, toastPositiveBackground: string, toastWarningBackground: string, toastNegativeBackground: string, spinnerTrackFill: string, progressbarTrackFill: string, tooltipBackground: string, tooltipText: string }, typography: { font100: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font200: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font250: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font300: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font350: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font400: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font450: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font500: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font600: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font700: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font800: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font900: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number }, font1000: { fontFamily: string, fontWeight: string | number, fontSize: string, lineHeight: string | number } }, sizing: { scale0: string, scale100: string, scale200: string, scale300: string, scale400: string, scale500: string, scale550: string, scale600: string, scale700: string, scale800: string, scale900: string, scale1000: string, scale1200: string, scale1400: string, scale1600: string, scale2400: string, scale3200: string, scale4800: string }, lighting: { shadow400: string, shadow500: string, shadow600: string, shadow700: string, overlay0: string, overlay100: string, overlay200: string, overlay300: string, overlay400: string, overlay500: string, overlay600: string }, animation: { timing100: string, timing400: string, timing700: string, easeOutCurve: string, easeInCurve: string, easeInOutCurve: string }, borders: { border100: { borderColor: string, borderStyle: string, borderWidth: string }, border200: { borderColor: string, borderStyle: string, borderWidth: string }, border300: { borderColor: string, borderStyle: string, borderWidth: string }, border400: { borderColor: string, borderStyle: string, borderWidth: string }, border500: { borderColor: string, borderStyle: string, borderWidth: string }, border600: { borderColor: string, borderStyle: string, borderWidth: string }, useRoundedCorners: boolean, radius100: string, radius200: string, radius300: string }, zIndex: { modal: number }, icons: { Alert: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ArrowDown: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ArrowLeft: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ArrowRight: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ArrowUp: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, CheckIndeterminate: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Check: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ChevronLeft: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, ChevronRight: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, DeleteAlt: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Delete: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Filter: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Grab: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Menu: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Overflow: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Plus: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Search: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Spinner: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, TriangleDown: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, TriangleLeft: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, TriangleRight: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, TriangleUp: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }>, Upload: react.ComponentType<{ children: Node, size: number | string, color: string, title: string, overrides: { Svg: { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>><{ $size: number | string, $color: string, $as: string, $style: ?{}, $ref: Ref<*> }> } }> }, tooltip: { backgroundColor: string } } }>, selected: number | Array<number>, shape: $Values<typeof SHAPE>, size: $Values<typeof SIZE> }, { children: mixed }>
onClick required function
SyntheticEventHTMLButtonElement,
number
=> mixed
selected union required One of
number,
Arraynumber
 => Node