Button With Drop
Type: React component
How to get ButtonWithDrop?
JavaScript
import { ButtonWithDrop } from 'fds/components';
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
icon
(Optional)
Type: 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
is
Disabled (Optional)
Type: Boolean
Whether or not the component should be rendered in a disabled state.
Default value
is
Selected (Optional)
Type: Boolean
Whether or not the component should be rendered in a selected state.
Default value
label
(Optional)
Type: String
The human readable label displayed in the component.
Default value
on
Click (Optional)
Type: 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
Default value
render
Drop (Required)
Type: 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
tooltip
Content (Optional)
Type: 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
-
type
(Optional)
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
-