<DropdownListButton> Component

floatingOn Property

Determines the target DOM reference where the <Dropdown> of <DropdownListButton> should be floating on.
If not set (undefined), the <Dropdown> floating on the <ToggleButton> of <DropdownListButton>.

Here the preview:

floatingPlacement Property

Determines the location where the <Dropdown> of <DropdownListButton> should be floating on the <ToggleButton> of <DropdownListButton>.

Here the preview:

floatingStrategy Property

Determines the technical strategy how the <Dropdown> of <DropdownListButton> can float.
In most cases, you should not worry about the detail mechanism how the <Dropdown> of <DropdownListButton> can float.

The possible values are:

• undefined
• 'absolute'
• 'fixed'

floatingAutoFlip Property

Automatically flips the floatingPlacement to opposite direction when the <Dropdown> of <DropdownListButton> is about to be clipped.

The possible values are:

• undefined
• true
• false

Here the preview:

floatingAutoShift Property

Automatically shifts the floatingPlacement to nearest safe position when the <Dropdown> of <DropdownListButton> is about to be clipped.

The possible values are:

• undefined
• true
• false

Here the preview:

floatingOffset Property

The distance (in pixel) between the <Dropdown> of <DropdownListButton> and the <ToggleButton> of <DropdownListButton>.

The possible values are:

• undefined
• 0
• positive number
• negative number

Here the preview:

floatingShift Property

The distance (in pixel) between the <Dropdown> of <DropdownListButton> and the default floatingPlacement location.

The possible values are:

• undefined
• 0
• positive number
• negative number

Here the preview:

onFloatingUpdate Property

Sets a callback function to be called when the <Dropdown> of <DropdownListButton> updates the position relative to the <ToggleButton> of <DropdownListButton>.

The callback function parameters:

• event: FloatingPosition

size Property

Defines the alternative size of the <DropdownListButton>.

The possible values are:

• undefined
• 'sm'
• 'md'
• 'lg'

Here the preview:

theme Property

Defines the contextual theme of the <DropdownListButton>.

The possible values are:

• undefined
• 'primary'
• 'secondary'
• 'success'
• 'info'
• 'warning'
• 'danger'
• 'light'
• 'dark'

Here the preview:

gradient Property

Activates a 3D mode of the <DropdownListButton>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

outlined Property

Activates an outlined mode (background-less, contrast foreground, and contrast border) of the <DropdownListButton>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

mild Property

Activates a mild mode (mild background, contrast foreground, and contrast border) of the <DropdownListButton>.

The possible values are:

• undefined
• 'inherit'
• true
• false

Here the preview:

enabled Property

Defines the enabled/disabled state of the <DropdownListButton>.

The possible values are:

• undefined
• true
• false

Here the preview:

inheritEnabled Property

Influences the <DropdownListButton>'s disabled state by <ancestor enabled={false}>.

The possible values are:

• undefined
• true
• false

Here the preview:

buttonComponent Property

Overwrites the internal <Button> component used as the composition of <DropdownListButton> component.

<DropdownListButton buttonComponent={
    <MyCustomButton />
} />

buttonRef Property

Gets the DOM reference of the internal <Button> component used as the composition of <DropdownListButton> component.

<DropdownListButton buttonRef={fooButtonRef} />

<DropdownListButton buttonComponent={
    <Button elmRef={fooButtonRef} />
} />

buttonOrientation Property

Sets the orientation of the internal <Button> component used as the composition of <DropdownListButton> component.

<DropdownListButton buttonOrientation='inline' />

<DropdownListButton buttonComponent={
    <Button orientation='inline' />
} />

buttonChildren Property

Defines the nested element of the internal <Button> component used as the composition of <DropdownListButton> component.

<DropdownListButton buttonChildren={
    <span>Hello World</span>
} />

<DropdownListButton buttonComponent={
    <Button>
        <span>Hello World</span>
    </Button>
} />

toggleButtonComponent Property

Overwrites the internal <ToggleButton> component used as the composition of <DropdownListButton> component.

<DropdownListButton toggleButtonComponent={
    <MyCustomToggleButton />
} />

dropdownComponent Property

Overwrites the internal <Dropdown> component used as the composition of <DropdownListButton> component.

<DropdownListButton dropdownComponent={
    <MyCustomDropdown />
} />

dropdownRef Property

Gets the DOM reference of the internal <Dropdown> component used as the composition of <DropdownListButton> component.

<DropdownListButton dropdownRef={fooDropdownRef} />

<DropdownListButton dropdownComponent={
    <Dropdown elmRef={fooDropdownRef} />
} />

listComponent Property

Overwrites the internal <List> component used as the composition of <DropdownListButton> component.

<DropdownListButton listComponent={
    <MyCustomList />
} />

listRef Property

Gets the DOM reference of the internal <List> component used as the composition of <DropdownListButton> component.

<DropdownListButton listRef={fooListRef} />

<DropdownListButton listComponent={
    <List elmRef={fooListRef} />
} />