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

Usage

React

import {
  ActionBar,
  Button,
  useDisclosure,
} from '@fintech-sandpit/ui/react';

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

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

    <ActionBar.Separator />

    <Button
      leftIcon={faTrash}
      variant="outline"
    >
      Delete
    </Button>

    <Button
      rightIcon={faShare}
      variant="outline"
    >
      Share
    </Button>
  </ActionBar.Root>
);

Vue

<script setup lang="ts">
import { ref } from 'vue';
import {
  faShare,
  faTrash,
} from '@fortawesome/free-solid-svg-icons';
import {
  ActionBar,
  Button,
  useDisclosure,
} from '@fintech-sandpit/ui/vue';

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

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

    <ActionBar.Separator />

    <Button
      :left-icon="faTrash"
      variant="outline"
    >
      Delete
    </Button>

    <Button
      :right-icon="faShare"
      variant="outline"
    >
      Share
    </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'