ActionBar

The Action Bar component displays a fixed bottom action bar with a set of actions that can be performed on selected items. It’s designed to be controlled by table or checkbox selections.

Demo

React

Vue

Example

React

// Import icons
import {
  faShare,
  faTrash,
} from '@fortawesome/free-solid-svg-icons';
// Import components
import {
  ActionBar,
  Button,
  Icon,
  useDisclosure,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/action_bar.css';
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();

return (
  <ActionBar.Root open={open}>
    <ActionBar.SelectionTrigger>
      1 selected
    </ActionBar.SelectionTrigger>

    <ActionBar.Separator />

    <Button variant="outline">
      <Icon
        as={faTrash}
        className="mr-2"
      />

      Delete
    </Button>

    <Button variant="outline">
      Share

      <Icon
        as={faShare}
        className="ml-2"
      />
    </Button>
  </ActionBar.Root>
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
// Import icons
import {
  faShare,
  faTrash,
} from '@fortawesome/free-solid-svg-icons';
// Import components
import {
  ActionBar,
  Button,
  useDisclosure,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/action_bar.css';
import '@fintech-sandpit/ui/style/components/button.css';
import '@fintech-sandpit/ui/style/components/icon.css';

const {
  open,
  onOpen,
  onClose,
} = useDisclosure();
</script>

<template>
  <ActionBar.Root :open="open">
    <ActionBar.SelectionTrigger>
      1 selected
    </ActionBar.SelectionTrigger>

    <ActionBar.Separator />

    <Button variant="outline">
      <Icon
        :as="faTrash"
        class="mr-2"
      />

      Delete
    </Button>

    <Button variant="outline">
      Share

      <Icon
        :as="faShare"
        class="ml-2"
      />
    </Button>
  </ActionBar.Root>
</template>

Props

Name	Type	Default	Description
open	boolean	false	Whether the action bar is open
placement	ActionBarPlacement	bottom	The placement of the action bar

Types

type ActionBarPlacement = 'bottom' | 'bottom-start' | 'bottom-end'