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/react'

Usage

BulkActions will be visible when there are one or more selections. The BulkActions component is best used in combination with DataGrid.

Basic

<BulkActions selections={['1']} width="400px">
<Button>Delete</Button>
</BulkActions>

Customize title

The title can be customized for localization or specifying what is selected.

<BulkActions
title=":selections email(s) selected"
selections={['1']}
width="400px"
>
<Button>Delete</Button>
</BulkActions>

Multiple actions

import {
Button,
Icon,
Menu,
MenuButton,
MenuList,
MenuItem,
Portal,
} from '@chakra-ui/react'
import { BulkActions } from '@saas-ui-pro/react'
import { FiArchive, FiTrash } from 'react-icons/fi'
export default function MultipleActions() {
return (
<BulkActions selections={['1']} width="400px">
<Menu>
<MenuButton as={Button} leftIcon={<Icon as={FiArchive} />}>
Move to
</MenuButton>
<Portal>
<MenuList>
<MenuItem>Inbox</MenuItem>
<MenuItem>Spam</MenuItem>
</MenuList>
</Portal>
</Menu>
<Button leftIcon={<Icon as={FiTrash} />}>Delete</Button>
</BulkActions>
)
}

Position & transtion

You can change the transition animation using motionPreset, supported presets are slideOutTop, slideOutBottom, fade, scale, none.

import { Box, Button } from '@chakra-ui/react'
import { BulkActions } from '@saas-ui-pro/react'
export default function Position() {
const [state, setState] = useState(['1'])
return (
<>
<Button onClick={() => setState(['1'])}>Select</Button>
<BulkActions
selections={state}
width="400px"
top="10px"
bottom="auto"
motionPreset="slideOutTop"
>
<Button onClick={() => setState([])}>Delete</Button>
</BulkActions>
</>
)
}

Custom styles

import { Box, Button } from '@chakra-ui/react'
import { BulkActions } from '@saas-ui-pro/react'
export default function CustomStyles() {
const [state, setState] = useState(['1'])
return (
<>
<Button onClick={() => setState(['1'])}>Select</Button>
<BulkActions
selections={state}
colorScheme="primary"
motionPreset="slideOutTop"
variant="solid"
sx={{
bottom: '40px',
top: '0',
left: 0,
right: 0,
bottom: 'auto',
boxShadow: 'md',
}}
>
<Button onClick={() => setState([])}>Delete</Button>
</BulkActions>
</>
)
}

Was this helpful?