DropButton

a button that controls a drop

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

"a user friendly label for screen readers"

alignSelf

How to align along the cross axis when contained in a Box or along the column axis when contained in a Grid.

"start"

"center"

"end"

"stretch"

disabled

Whether the button should be disabled.

truefalse

dropAlign

How to align the drop with respect to the button.

{"top": "top", "left": "left"}

{"bottom": "bottom", "right": "right"}

dropContent

Content to put inside the Drop.

<Box>...</Box>

dropProps

Any valid Drop prop.

"object"

dropTarget

Target where the drop will be aligned to. This should be a React reference. Typically, this is not required as the drop will be aligned to the DropButton itself by default.

"object"

gridArea

The name of the area to place this inside a parent Grid.

"a parent grid area name"

margin

The amount of margin around the component. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side.

"xsmall"

"small"

"medium"

"large"

"xlarge"

{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onClose

Callback for when the drop is closed

() => {}

onOpen

Callback for when the drop is opened

() => {}

open

Whether the drop should be open or not. Setting this property does not influence user interaction after it has been rendered.

truefalse