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