BulkActions

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

Beta
Buy Pro
0.40.0 (latest)

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?