The action buttons.
BulkActions
A set of actions to perform on one or more selected items.
- Beta
Get Pro
Import#
BulkActions
: The container component, manages state and composition.
import { BulkActions } from '@saas-ui/pro'
Usage#
BulkActions will be visible when there are one or more selections
.
The BulkActions component is best used in combination with DataGrid.
Basic#
<Box position="relative" height="100px"><BulkActionsselections={['1']}actions={<><Button>Delete</Button></>}/></Box>
Customize title#
The title can be customized for localization or specifying what is selected.
<Box position="relative" height="100px"><BulkActionstitle=":selections email(s) selected"selections={['1']}actions={<><Button>Delete</Button></>}/></Box>
Multiple actions#
<Box position="relative" height="100px"><BulkActionsselections={['1']}actions={<><Menu><MenuButton as={Button}>Move to</MenuButton><Portal><MenuList><MenuItem>Inbox</MenuItem><MenuItem>Spam</MenuItem></MenuList></Portal></Menu><Button>Delete</Button></>}/></Box>
Position & transtion#
function Position() {const [state, setState] = useState(['1'])return (<Box position="relative" height="100px"><Button onClick={() => setState(['1'])}>Select</Button><BulkActionsselections={state}actions={<><Button onClick={() => setState([])}>Delete</Button></>}top="auto"bottom="0"motionPreset="slideOutBottom"/></Box>)}
Custom styles#
function CustomStyles() {const [state, setState] = useState(['1'])return (<Box position="relative" height="100px"><Button onClick={() => setState(['1'])}>Select</Button><BulkActionsselections={state}actions={<><Button onClick={() => setState([])}>Delete</Button></>}colorScheme="gray"motionPreset="slideOutBottom"sx={{bottom: '40px',top: 'auto',right: 'auto',borderRadius: 'lg',boxShadow: 'md',maxW: 'container.lg',}}/></Box>)}
Props#
The BulkActions
component accepts all Banner
properties.
Toolbar Props#
actions
required
actions
required
Description
Type
MaybeRenderProp<{ selections: BulkActionsSelections; }>
selections
required
selections
required
Description
Array with selected ids.
Type
BulkActionsSelections
about
about
Type
string
accessKey
accessKey
Type
string
autoCapitalize
autoCapitalize
Type
string
autoCorrect
autoCorrect
Type
string
autoSave
autoSave
Type
string
className
className
Type
string
contentEditable
contentEditable
Type
Booleanish | "inherit"
contextMenu
contextMenu
Type
string
dangerouslySetInnerHTML
dangerouslySetInnerHTML
Type
{ __html: string; }
datatype
datatype
Type
string
defaultChecked
defaultChecked
Type
boolean
defaultValue
defaultValue
Type
string | number | readonly string[]
dir
dir
Type
string
draggable
draggable
Type
Booleanish
hidden
hidden
Type
boolean
id
id
Type
string
inlist
inlist
Type
any
inputMode
inputMode
Type
"text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"
is
is
Type
string
isOpen
isOpen
Description
Show or hide the banner.
Type
boolean
itemID
itemID
Type
string
itemProp
itemProp
Type
string
itemRef
itemRef
Type
string
itemScope
itemScope
Type
boolean
itemType
itemType
Type
string
lang
lang
Type
string
motionPreset
motionPreset
Description
Customize the close animation.
Type
'slideOutTop', 'slideOutBottom', 'fade', 'scale', 'none'
Default
'slideOutTop'
nonce
nonce
Type
string
onAbort
onAbort
Type
ReactEventHandler<HTMLDivElement>
onAbortCapture
onAbortCapture
Type
ReactEventHandler<HTMLDivElement>
onAnimationEnd
onAnimationEnd
Type
AnimationEventHandler<HTMLDivElement>
onAnimationEndCapture
onAnimationEndCapture
Type
AnimationEventHandler<HTMLDivElement>
onAnimationIteration
onAnimationIteration
Type
AnimationEventHandler<HTMLDivElement>
onAnimationIterationCapture
onAnimationIterationCapture
Type
AnimationEventHandler<HTMLDivElement>
onAnimationStartCapture
onAnimationStartCapture
Type
AnimationEventHandler<HTMLDivElement>
onAuxClick
onAuxClick
Type
MouseEventHandler<HTMLDivElement>
onAuxClickCapture
onAuxClickCapture
Type
MouseEventHandler<HTMLDivElement>
onBeforeInput
onBeforeInput
Type
FormEventHandler<HTMLDivElement>
onBeforeInputCapture
onBeforeInputCapture
Type
FormEventHandler<HTMLDivElement>
onBlur
onBlur
Type
FocusEventHandler<HTMLDivElement>
onBlurCapture
onBlurCapture
Type
FocusEventHandler<HTMLDivElement>
onCanPlay
onCanPlay
Type
ReactEventHandler<HTMLDivElement>
onCanPlayCapture
onCanPlayCapture
Type
ReactEventHandler<HTMLDivElement>
onCanPlayThrough
onCanPlayThrough
Type
ReactEventHandler<HTMLDivElement>
onCanPlayThroughCapture
onCanPlayThroughCapture
Type
ReactEventHandler<HTMLDivElement>
onChange
onChange
Type
FormEventHandler<HTMLDivElement>
onChangeCapture
onChangeCapture
Type
FormEventHandler<HTMLDivElement>
onClick
onClick
Type
MouseEventHandler<HTMLDivElement>
onClickCapture
onClickCapture
Type
MouseEventHandler<HTMLDivElement>
onClose
onClose
Description
Callback fired when the close button is clicked.
Type
(() => void)
onCompositionEnd
onCompositionEnd
Type
CompositionEventHandler<HTMLDivElement>
onCompositionEndCapture
onCompositionEndCapture
Type
CompositionEventHandler<HTMLDivElement>
onCompositionStart
onCompositionStart
Type
CompositionEventHandler<HTMLDivElement>
onCompositionStartCapture
onCompositionStartCapture
Type
CompositionEventHandler<HTMLDivElement>
onCompositionUpdate
onCompositionUpdate
Type
CompositionEventHandler<HTMLDivElement>
onCompositionUpdateCapture
onCompositionUpdateCapture
Type
CompositionEventHandler<HTMLDivElement>
onContextMenu
onContextMenu
Type
MouseEventHandler<HTMLDivElement>
onContextMenuCapture
onContextMenuCapture
Type
MouseEventHandler<HTMLDivElement>
onCopy
onCopy
Type
ClipboardEventHandler<HTMLDivElement>
onCopyCapture
onCopyCapture
Type
ClipboardEventHandler<HTMLDivElement>
onCut
onCut
Type
ClipboardEventHandler<HTMLDivElement>
onCutCapture
onCutCapture
Type
ClipboardEventHandler<HTMLDivElement>
onDoubleClick
onDoubleClick
Type
MouseEventHandler<HTMLDivElement>
onDoubleClickCapture
onDoubleClickCapture
Type
MouseEventHandler<HTMLDivElement>
onDragCapture
onDragCapture
Type
DragEventHandler<HTMLDivElement>
onDragEndCapture
onDragEndCapture
Type
DragEventHandler<HTMLDivElement>
onDragEnter
onDragEnter
Type
DragEventHandler<HTMLDivElement>
onDragEnterCapture
onDragEnterCapture
Type
DragEventHandler<HTMLDivElement>
onDragExit
onDragExit
Type
DragEventHandler<HTMLDivElement>
onDragExitCapture
onDragExitCapture
Type
DragEventHandler<HTMLDivElement>
onDragLeave
onDragLeave
Type
DragEventHandler<HTMLDivElement>
onDragLeaveCapture
onDragLeaveCapture
Type
DragEventHandler<HTMLDivElement>
onDragOver
onDragOver
Type
DragEventHandler<HTMLDivElement>
onDragOverCapture
onDragOverCapture
Type
DragEventHandler<HTMLDivElement>
onDragStartCapture
onDragStartCapture
Type
DragEventHandler<HTMLDivElement>
onDrop
onDrop
Type
DragEventHandler<HTMLDivElement>
onDropCapture
onDropCapture
Type
DragEventHandler<HTMLDivElement>
onDurationChange
onDurationChange
Type
ReactEventHandler<HTMLDivElement>
onDurationChangeCapture
onDurationChangeCapture
Type
ReactEventHandler<HTMLDivElement>
onEmptied
onEmptied
Type
ReactEventHandler<HTMLDivElement>
onEmptiedCapture
onEmptiedCapture
Type
ReactEventHandler<HTMLDivElement>
onEncrypted
onEncrypted
Type
ReactEventHandler<HTMLDivElement>
onEncryptedCapture
onEncryptedCapture
Type
ReactEventHandler<HTMLDivElement>
onEnded
onEnded
Type
ReactEventHandler<HTMLDivElement>
onEndedCapture
onEndedCapture
Type
ReactEventHandler<HTMLDivElement>
onError
onError
Type
ReactEventHandler<HTMLDivElement>
onErrorCapture
onErrorCapture
Type
ReactEventHandler<HTMLDivElement>
onFocus
onFocus
Type
FocusEventHandler<HTMLDivElement>
onFocusCapture
onFocusCapture
Type
FocusEventHandler<HTMLDivElement>
onGotPointerCapture
onGotPointerCapture
Type
PointerEventHandler<HTMLDivElement>
onGotPointerCaptureCapture
onGotPointerCaptureCapture
Type
PointerEventHandler<HTMLDivElement>
onInput
onInput
Type
FormEventHandler<HTMLDivElement>
onInputCapture
onInputCapture
Type
FormEventHandler<HTMLDivElement>
onInvalid
onInvalid
Type
FormEventHandler<HTMLDivElement>
onInvalidCapture
onInvalidCapture
Type
FormEventHandler<HTMLDivElement>
onKeyDown
onKeyDown
Type
KeyboardEventHandler<HTMLDivElement>
onKeyDownCapture
onKeyDownCapture
Type
KeyboardEventHandler<HTMLDivElement>
onKeyPress
onKeyPress
Type
KeyboardEventHandler<HTMLDivElement>
onKeyPressCapture
onKeyPressCapture
Type
KeyboardEventHandler<HTMLDivElement>
onKeyUp
onKeyUp
Type
KeyboardEventHandler<HTMLDivElement>
onKeyUpCapture
onKeyUpCapture
Type
KeyboardEventHandler<HTMLDivElement>
onLoad
onLoad
Type
ReactEventHandler<HTMLDivElement>
onLoadCapture
onLoadCapture
Type
ReactEventHandler<HTMLDivElement>
onLoadedData
onLoadedData
Type
ReactEventHandler<HTMLDivElement>
onLoadedDataCapture
onLoadedDataCapture
Type
ReactEventHandler<HTMLDivElement>
onLoadedMetadata
onLoadedMetadata
Type
ReactEventHandler<HTMLDivElement>
onLoadedMetadataCapture
onLoadedMetadataCapture
Type
ReactEventHandler<HTMLDivElement>
onLoadStart
onLoadStart
Type
ReactEventHandler<HTMLDivElement>
onLoadStartCapture
onLoadStartCapture
Type
ReactEventHandler<HTMLDivElement>
onLostPointerCapture
onLostPointerCapture
Type
PointerEventHandler<HTMLDivElement>
onLostPointerCaptureCapture
onLostPointerCaptureCapture
Type
PointerEventHandler<HTMLDivElement>
onMouseDown
onMouseDown
Type
MouseEventHandler<HTMLDivElement>
onMouseDownCapture
onMouseDownCapture
Type
MouseEventHandler<HTMLDivElement>
onMouseEnter
onMouseEnter
Type
MouseEventHandler<HTMLDivElement>
onMouseLeave
onMouseLeave
Type
MouseEventHandler<HTMLDivElement>
onMouseMove
onMouseMove
Type
MouseEventHandler<HTMLDivElement>
onMouseMoveCapture
onMouseMoveCapture
Type
MouseEventHandler<HTMLDivElement>
onMouseOut
onMouseOut
Type
MouseEventHandler<HTMLDivElement>
onMouseOutCapture
onMouseOutCapture
Type
MouseEventHandler<HTMLDivElement>
onMouseOver
onMouseOver
Type
MouseEventHandler<HTMLDivElement>
onMouseOverCapture
onMouseOverCapture
Type
MouseEventHandler<HTMLDivElement>
onMouseUp
onMouseUp
Type
MouseEventHandler<HTMLDivElement>
onMouseUpCapture
onMouseUpCapture
Type
MouseEventHandler<HTMLDivElement>
onPaste
onPaste
Type
ClipboardEventHandler<HTMLDivElement>
onPasteCapture
onPasteCapture
Type
ClipboardEventHandler<HTMLDivElement>
onPause
onPause
Type
ReactEventHandler<HTMLDivElement>
onPauseCapture
onPauseCapture
Type
ReactEventHandler<HTMLDivElement>
onPlay
onPlay
Type
ReactEventHandler<HTMLDivElement>
onPlayCapture
onPlayCapture
Type
ReactEventHandler<HTMLDivElement>
onPlaying
onPlaying
Type
ReactEventHandler<HTMLDivElement>
onPlayingCapture
onPlayingCapture
Type
ReactEventHandler<HTMLDivElement>
onPointerCancel
onPointerCancel
Type
PointerEventHandler<HTMLDivElement>
onPointerCancelCapture
onPointerCancelCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerDown
onPointerDown
Type
PointerEventHandler<HTMLDivElement>
onPointerDownCapture
onPointerDownCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerEnter
onPointerEnter
Type
PointerEventHandler<HTMLDivElement>
onPointerEnterCapture
onPointerEnterCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerLeave
onPointerLeave
Type
PointerEventHandler<HTMLDivElement>
onPointerLeaveCapture
onPointerLeaveCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerMove
onPointerMove
Type
PointerEventHandler<HTMLDivElement>
onPointerMoveCapture
onPointerMoveCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerOut
onPointerOut
Type
PointerEventHandler<HTMLDivElement>
onPointerOutCapture
onPointerOutCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerOver
onPointerOver
Type
PointerEventHandler<HTMLDivElement>
onPointerOverCapture
onPointerOverCapture
Type
PointerEventHandler<HTMLDivElement>
onPointerUp
onPointerUp
Type
PointerEventHandler<HTMLDivElement>
onPointerUpCapture
onPointerUpCapture
Type
PointerEventHandler<HTMLDivElement>
onProgress
onProgress
Type
ReactEventHandler<HTMLDivElement>
onProgressCapture
onProgressCapture
Type
ReactEventHandler<HTMLDivElement>
onRateChange
onRateChange
Type
ReactEventHandler<HTMLDivElement>
onRateChangeCapture
onRateChangeCapture
Type
ReactEventHandler<HTMLDivElement>
onReset
onReset
Type
FormEventHandler<HTMLDivElement>
onResetCapture
onResetCapture
Type
FormEventHandler<HTMLDivElement>
onScroll
onScroll
Type
UIEventHandler<HTMLDivElement>
onScrollCapture
onScrollCapture
Type
UIEventHandler<HTMLDivElement>
onSeeked
onSeeked
Type
ReactEventHandler<HTMLDivElement>
onSeekedCapture
onSeekedCapture
Type
ReactEventHandler<HTMLDivElement>
onSeeking
onSeeking
Type
ReactEventHandler<HTMLDivElement>
onSeekingCapture
onSeekingCapture
Type
ReactEventHandler<HTMLDivElement>
onSelect
onSelect
Type
ReactEventHandler<HTMLDivElement>
onSelectCapture
onSelectCapture
Type
ReactEventHandler<HTMLDivElement>
onStalled
onStalled
Type
ReactEventHandler<HTMLDivElement>
onStalledCapture
onStalledCapture
Type
ReactEventHandler<HTMLDivElement>
onSubmit
onSubmit
Type
FormEventHandler<HTMLDivElement>
onSubmitCapture
onSubmitCapture
Type
FormEventHandler<HTMLDivElement>
onSuspend
onSuspend
Type
ReactEventHandler<HTMLDivElement>
onSuspendCapture
onSuspendCapture
Type
ReactEventHandler<HTMLDivElement>
onTimeUpdate
onTimeUpdate
Type
ReactEventHandler<HTMLDivElement>
onTimeUpdateCapture
onTimeUpdateCapture
Type
ReactEventHandler<HTMLDivElement>
onTouchCancel
onTouchCancel
Type
TouchEventHandler<HTMLDivElement>
onTouchCancelCapture
onTouchCancelCapture
Type
TouchEventHandler<HTMLDivElement>
onTouchEnd
onTouchEnd
Type
TouchEventHandler<HTMLDivElement>
onTouchEndCapture
onTouchEndCapture
Type
TouchEventHandler<HTMLDivElement>
onTouchMove
onTouchMove
Type
TouchEventHandler<HTMLDivElement>
onTouchMoveCapture
onTouchMoveCapture
Type
TouchEventHandler<HTMLDivElement>
onTouchStart
onTouchStart
Type
TouchEventHandler<HTMLDivElement>
onTouchStartCapture
onTouchStartCapture
Type
TouchEventHandler<HTMLDivElement>
onTransitionEnd
onTransitionEnd
Type
TransitionEventHandler<HTMLDivElement>
onTransitionEndCapture
onTransitionEndCapture
Type
TransitionEventHandler<HTMLDivElement>
onVolumeChange
onVolumeChange
Type
ReactEventHandler<HTMLDivElement>
onVolumeChangeCapture
onVolumeChangeCapture
Type
ReactEventHandler<HTMLDivElement>
onWaiting
onWaiting
Type
ReactEventHandler<HTMLDivElement>
onWaitingCapture
onWaitingCapture
Type
ReactEventHandler<HTMLDivElement>
onWheel
onWheel
Type
WheelEventHandler<HTMLDivElement>
onWheelCapture
onWheelCapture
Type
WheelEventHandler<HTMLDivElement>
placeholder
placeholder
Type
string
prefix
prefix
Type
string
property
property
Type
string
radioGroup
radioGroup
Type
string
resource
resource
Type
string
results
results
Type
number
role
role
Type
AriaRole
security
security
Type
string
slot
slot
Type
string
spellCheck
spellCheck
Type
Booleanish
status
status
Description
The status of the banner.
Type
"info" | "warning" | "success" | "error"
suppressContentEditableWarning
suppressContentEditableWarning
Type
boolean
suppressHydrationWarning
suppressHydrationWarning
Type
boolean
tabIndex
tabIndex
Type
number
title
title
Description
The title ":selections" will be replaced with the amount of selected items.
Type
string
Default
":selections selected"
translate
translate
Type
"yes" | "no"
typeof
typeof
Type
string
unselectable
unselectable
Type
"on" | "off"
vocab
vocab
Type
string
Was this helpful?