BulkActions

A set of actions to perform on one or more selected items.

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">
<BulkActions
selections={['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">
<BulkActions
title=":selections email(s) selected"
selections={['1']}
actions={
<>
<Button>Delete</Button>
</>
}
/>
</Box>

Multiple actions#

<Box position="relative" height="100px">
<BulkActions
selections={['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>
<BulkActions
selections={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>
<BulkActions
selections={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#

actionsrequired

Description

The action buttons.

Type
MaybeRenderProp<{ selections: BulkActionsSelections; }>

selectionsrequired

Description

Array with selected ids.

Type
BulkActionsSelections

about

Type
string

accessKey

Type
string

autoCapitalize

Type
string

autoCorrect

Type
string

autoSave

Type
string

className

Type
string

contentEditable

Type
Booleanish | "inherit"

contextMenu

Type
string

dangerouslySetInnerHTML

Type
{ __html: string; }

datatype

Type
string

defaultChecked

Type
boolean

defaultValue

Type
string | number | readonly string[]

dir

Type
string

draggable

Type
Booleanish

hidden

Type
boolean

id

Type
string

inlist

Type
any

inputMode

Type
"text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal"

is

Type
string

isOpen

Description

Show or hide the banner.

Type
boolean

itemID

Type
string

itemProp

Type
string

itemRef

Type
string

itemScope

Type
boolean

itemType

Type
string

lang

Type
string

motionPreset

Description

Customize the close animation.

Type
'slideOutTop', 'slideOutBottom', 'fade', 'scale', 'none'
Default
'slideOutTop'

nonce

Type
string

onAbort

Type
ReactEventHandler<HTMLDivElement>

onAbortCapture

Type
ReactEventHandler<HTMLDivElement>

onAnimationEnd

Type
AnimationEventHandler<HTMLDivElement>

onAnimationEndCapture

Type
AnimationEventHandler<HTMLDivElement>

onAnimationIteration

Type
AnimationEventHandler<HTMLDivElement>

onAnimationIterationCapture

Type
AnimationEventHandler<HTMLDivElement>

onAnimationStartCapture

Type
AnimationEventHandler<HTMLDivElement>

onAuxClick

Type
MouseEventHandler<HTMLDivElement>

onAuxClickCapture

Type
MouseEventHandler<HTMLDivElement>

onBeforeInput

Type
FormEventHandler<HTMLDivElement>

onBeforeInputCapture

Type
FormEventHandler<HTMLDivElement>

onBlur

Type
FocusEventHandler<HTMLDivElement>

onBlurCapture

Type
FocusEventHandler<HTMLDivElement>

onCanPlay

Type
ReactEventHandler<HTMLDivElement>

onCanPlayCapture

Type
ReactEventHandler<HTMLDivElement>

onCanPlayThrough

Type
ReactEventHandler<HTMLDivElement>

onCanPlayThroughCapture

Type
ReactEventHandler<HTMLDivElement>

onChange

Type
FormEventHandler<HTMLDivElement>

onChangeCapture

Type
FormEventHandler<HTMLDivElement>

onClick

Type
MouseEventHandler<HTMLDivElement>

onClickCapture

Type
MouseEventHandler<HTMLDivElement>

onClose

Description

Callback fired when the close button is clicked.

Type
(() => void)

onCompositionEnd

Type
CompositionEventHandler<HTMLDivElement>

onCompositionEndCapture

Type
CompositionEventHandler<HTMLDivElement>

onCompositionStart

Type
CompositionEventHandler<HTMLDivElement>

onCompositionStartCapture

Type
CompositionEventHandler<HTMLDivElement>

onCompositionUpdate

Type
CompositionEventHandler<HTMLDivElement>

onCompositionUpdateCapture

Type
CompositionEventHandler<HTMLDivElement>

onContextMenu

Type
MouseEventHandler<HTMLDivElement>

onContextMenuCapture

Type
MouseEventHandler<HTMLDivElement>

onCopy

Type
ClipboardEventHandler<HTMLDivElement>

onCopyCapture

Type
ClipboardEventHandler<HTMLDivElement>

onCut

Type
ClipboardEventHandler<HTMLDivElement>

onCutCapture

Type
ClipboardEventHandler<HTMLDivElement>

onDoubleClick

Type
MouseEventHandler<HTMLDivElement>

onDoubleClickCapture

Type
MouseEventHandler<HTMLDivElement>

onDragCapture

Type
DragEventHandler<HTMLDivElement>

onDragEndCapture

Type
DragEventHandler<HTMLDivElement>

onDragEnter

Type
DragEventHandler<HTMLDivElement>

onDragEnterCapture

Type
DragEventHandler<HTMLDivElement>

onDragExit

Type
DragEventHandler<HTMLDivElement>

onDragExitCapture

Type
DragEventHandler<HTMLDivElement>

onDragLeave

Type
DragEventHandler<HTMLDivElement>

onDragLeaveCapture

Type
DragEventHandler<HTMLDivElement>

onDragOver

Type
DragEventHandler<HTMLDivElement>

onDragOverCapture

Type
DragEventHandler<HTMLDivElement>

onDragStartCapture

Type
DragEventHandler<HTMLDivElement>

onDrop

Type
DragEventHandler<HTMLDivElement>

onDropCapture

Type
DragEventHandler<HTMLDivElement>

onDurationChange

Type
ReactEventHandler<HTMLDivElement>

onDurationChangeCapture

Type
ReactEventHandler<HTMLDivElement>

onEmptied

Type
ReactEventHandler<HTMLDivElement>

onEmptiedCapture

Type
ReactEventHandler<HTMLDivElement>

onEncrypted

Type
ReactEventHandler<HTMLDivElement>

onEncryptedCapture

Type
ReactEventHandler<HTMLDivElement>

onEnded

Type
ReactEventHandler<HTMLDivElement>

onEndedCapture

Type
ReactEventHandler<HTMLDivElement>

onError

Type
ReactEventHandler<HTMLDivElement>

onErrorCapture

Type
ReactEventHandler<HTMLDivElement>

onFocus

Type
FocusEventHandler<HTMLDivElement>

onFocusCapture

Type
FocusEventHandler<HTMLDivElement>

onGotPointerCapture

Type
PointerEventHandler<HTMLDivElement>

onGotPointerCaptureCapture

Type
PointerEventHandler<HTMLDivElement>

onInput

Type
FormEventHandler<HTMLDivElement>

onInputCapture

Type
FormEventHandler<HTMLDivElement>

onInvalid

Type
FormEventHandler<HTMLDivElement>

onInvalidCapture

Type
FormEventHandler<HTMLDivElement>

onKeyDown

Type
KeyboardEventHandler<HTMLDivElement>

onKeyDownCapture

Type
KeyboardEventHandler<HTMLDivElement>

onKeyPress

Type
KeyboardEventHandler<HTMLDivElement>

onKeyPressCapture

Type
KeyboardEventHandler<HTMLDivElement>

onKeyUp

Type
KeyboardEventHandler<HTMLDivElement>

onKeyUpCapture

Type
KeyboardEventHandler<HTMLDivElement>

onLoad

Type
ReactEventHandler<HTMLDivElement>

onLoadCapture

Type
ReactEventHandler<HTMLDivElement>

onLoadedData

Type
ReactEventHandler<HTMLDivElement>

onLoadedDataCapture

Type
ReactEventHandler<HTMLDivElement>

onLoadedMetadata

Type
ReactEventHandler<HTMLDivElement>

onLoadedMetadataCapture

Type
ReactEventHandler<HTMLDivElement>

onLoadStart

Type
ReactEventHandler<HTMLDivElement>

onLoadStartCapture

Type
ReactEventHandler<HTMLDivElement>

onLostPointerCapture

Type
PointerEventHandler<HTMLDivElement>

onLostPointerCaptureCapture

Type
PointerEventHandler<HTMLDivElement>

onMouseDown

Type
MouseEventHandler<HTMLDivElement>

onMouseDownCapture

Type
MouseEventHandler<HTMLDivElement>

onMouseEnter

Type
MouseEventHandler<HTMLDivElement>

onMouseLeave

Type
MouseEventHandler<HTMLDivElement>

onMouseMove

Type
MouseEventHandler<HTMLDivElement>

onMouseMoveCapture

Type
MouseEventHandler<HTMLDivElement>

onMouseOut

Type
MouseEventHandler<HTMLDivElement>

onMouseOutCapture

Type
MouseEventHandler<HTMLDivElement>

onMouseOver

Type
MouseEventHandler<HTMLDivElement>

onMouseOverCapture

Type
MouseEventHandler<HTMLDivElement>

onMouseUp

Type
MouseEventHandler<HTMLDivElement>

onMouseUpCapture

Type
MouseEventHandler<HTMLDivElement>

onPaste

Type
ClipboardEventHandler<HTMLDivElement>

onPasteCapture

Type
ClipboardEventHandler<HTMLDivElement>

onPause

Type
ReactEventHandler<HTMLDivElement>

onPauseCapture

Type
ReactEventHandler<HTMLDivElement>

onPlay

Type
ReactEventHandler<HTMLDivElement>

onPlayCapture

Type
ReactEventHandler<HTMLDivElement>

onPlaying

Type
ReactEventHandler<HTMLDivElement>

onPlayingCapture

Type
ReactEventHandler<HTMLDivElement>

onPointerCancel

Type
PointerEventHandler<HTMLDivElement>

onPointerCancelCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerDown

Type
PointerEventHandler<HTMLDivElement>

onPointerDownCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerEnter

Type
PointerEventHandler<HTMLDivElement>

onPointerEnterCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerLeave

Type
PointerEventHandler<HTMLDivElement>

onPointerLeaveCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerMove

Type
PointerEventHandler<HTMLDivElement>

onPointerMoveCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerOut

Type
PointerEventHandler<HTMLDivElement>

onPointerOutCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerOver

Type
PointerEventHandler<HTMLDivElement>

onPointerOverCapture

Type
PointerEventHandler<HTMLDivElement>

onPointerUp

Type
PointerEventHandler<HTMLDivElement>

onPointerUpCapture

Type
PointerEventHandler<HTMLDivElement>

onProgress

Type
ReactEventHandler<HTMLDivElement>

onProgressCapture

Type
ReactEventHandler<HTMLDivElement>

onRateChange

Type
ReactEventHandler<HTMLDivElement>

onRateChangeCapture

Type
ReactEventHandler<HTMLDivElement>

onReset

Type
FormEventHandler<HTMLDivElement>

onResetCapture

Type
FormEventHandler<HTMLDivElement>

onScroll

Type
UIEventHandler<HTMLDivElement>

onScrollCapture

Type
UIEventHandler<HTMLDivElement>

onSeeked

Type
ReactEventHandler<HTMLDivElement>

onSeekedCapture

Type
ReactEventHandler<HTMLDivElement>

onSeeking

Type
ReactEventHandler<HTMLDivElement>

onSeekingCapture

Type
ReactEventHandler<HTMLDivElement>

onSelect

Type
ReactEventHandler<HTMLDivElement>

onSelectCapture

Type
ReactEventHandler<HTMLDivElement>

onStalled

Type
ReactEventHandler<HTMLDivElement>

onStalledCapture

Type
ReactEventHandler<HTMLDivElement>

onSubmit

Type
FormEventHandler<HTMLDivElement>

onSubmitCapture

Type
FormEventHandler<HTMLDivElement>

onSuspend

Type
ReactEventHandler<HTMLDivElement>

onSuspendCapture

Type
ReactEventHandler<HTMLDivElement>

onTimeUpdate

Type
ReactEventHandler<HTMLDivElement>

onTimeUpdateCapture

Type
ReactEventHandler<HTMLDivElement>

onTouchCancel

Type
TouchEventHandler<HTMLDivElement>

onTouchCancelCapture

Type
TouchEventHandler<HTMLDivElement>

onTouchEnd

Type
TouchEventHandler<HTMLDivElement>

onTouchEndCapture

Type
TouchEventHandler<HTMLDivElement>

onTouchMove

Type
TouchEventHandler<HTMLDivElement>

onTouchMoveCapture

Type
TouchEventHandler<HTMLDivElement>

onTouchStart

Type
TouchEventHandler<HTMLDivElement>

onTouchStartCapture

Type
TouchEventHandler<HTMLDivElement>

onTransitionEnd

Type
TransitionEventHandler<HTMLDivElement>

onTransitionEndCapture

Type
TransitionEventHandler<HTMLDivElement>

onVolumeChange

Type
ReactEventHandler<HTMLDivElement>

onVolumeChangeCapture

Type
ReactEventHandler<HTMLDivElement>

onWaiting

Type
ReactEventHandler<HTMLDivElement>

onWaitingCapture

Type
ReactEventHandler<HTMLDivElement>

onWheel

Type
WheelEventHandler<HTMLDivElement>

onWheelCapture

Type
WheelEventHandler<HTMLDivElement>

placeholder

Type
string

prefix

Type
string

property

Type
string

radioGroup

Type
string

resource

Type
string

results

Type
number

role

Type
AriaRole

security

Type
string

slot

Type
string

spellCheck

Type
Booleanish

status

Description

The status of the banner.

Type
"info" | "warning" | "success" | "error"

suppressContentEditableWarning

Type
boolean

suppressHydrationWarning

Type
boolean

tabIndex

Type
number

title

Description

The title ":selections" will be replaced with the amount of selected items.

Type
string
Default
":selections selected"

translate

Type
"yes" | "no"

typeof

Type
string

unselectable

Type
"on" | "off"

vocab

Type
string

Was this helpful?