DropButton

Type: React component

How to get DropButton?

JavaScript

import { DropButton } from 'fds/components';

Deprecated!

Use the more generic DropAnchor component instead.

A utility component which renders a specified button using a render function and automatically anchors a Drop next to it when the drop is opened. The rendered Drop and its corresponding contents can also be specified using a render function.

Keyboard behavior:

  • Escape: close the Drop

Props

  1. isDisabled

    (Optional)

    Type: Boolean

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

    Default value

  2. onClick

    (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

  3. onDropToggled

    (Optional)

    Type: Function

    A callback that is called whenever the drop is toggled.

    Arguments

    Default value

  4. onRef

    (Optional)

    Type: Function

    A callback that is called whenever a component's ref changes.

    Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

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

    Arguments

    Returns

  5. renderButton

    (Required)

    Type: Function

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

    Arguments

    Returns

  6. renderDrop

    (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