ButtonWithDrop

How to get ButtonWithDrop

import { ButtonWithDrop } from 'fds/components';

Type: Component

A DropButton which renders a Button with the specified props.

This button only toggles the rendered drop. If a click handler on the button is desired, consider using SplitButtonWithDrop instead.

Props

# Name Type Description
1. [icon] String

The name of the icon displayed in the component.

This should be one of the FontAwesome (v5 Pro) icon names with an optional style prefix ('far ' is the default prefix). For more info, see the Font Awesome concept page.

  Default value
null
2. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
3. [isSelected] Boolean

Whether or not the component should be rendered in a selected state.

  Default value
false
4. [label] String

The human readable label displayed in the component.

  Default value
""
5. [onClick] Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
  Default value
null
6. renderDrop Function

A callback that is called at every render of this component. Expects a valid React component instance of the desired drop and its contents to be returned.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
closeDrop Function

Callback function which closes the drop.

7. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

  Default value
null
8. [type] String

Allows you to override the background and border color from its default values (which are based on the context where you use the button; masthead / masthead tab buttons / toolbar) to one of either:

  • 'default'

  • 'primary'

  • 'transparent'

  • 'warning'

  • 'error' Defaults to 'default', which is then interpreted based on the context.

Please visit the Button playground example for visual examples for each type in each context.

  Default value
null

Related links

Was this page helpful?