ActionBar

free

ActionBar keeps bulk actions close to selected records without occupying the page at rest.

import { useState } from 'react';
import ActionBar from '@/components/ui/action-bar';
import Avatar from '@/components/ui/avatar';
import Button from '@/components/ui/button';

Installation

Add this component with the NateUI CLI.

npx nateui@latest add ActionBar

pnpm dlx nateui@latest add ActionBar

yarn dlx nateui@latest add ActionBar

Examples

Basic

import { useState } from 'react';
import ActionBar from '@/components/ui/action-bar';
import Button from '@/components/ui/button';

Width

import { useState } from 'react';
import ActionBar from '@/components/ui/action-bar';
import Button from '@/components/ui/button';

Close With Escape

import { useState } from 'react';
import ActionBar from '@/components/ui/action-bar';
import Button from '@/components/ui/button';

Selection

import { useState } from 'react';
import ActionBar from '@/components/ui/action-bar';
import Button from '@/components/ui/button';
import Checkbox from '@/components/ui/checkbox';

API

ActionBar accepts the props below plus native props for the root div.

Prop	Description	Type	Default
`children`	Content rendered inside the action bar.	`ReactNode`	-
`className`	Class names applied to the positioned action bar wrapper.	`string`	-
`contentClassName`	Class names applied to the inner action bar surface.	`string`	-
`onOpenChange`	Called when the floating interaction layer requests an open-state change.	`ActionBarOpenChangeHandler`	-
`open`	Controls whether the action bar is visible.	`boolean`	-
`ref`	Ref forwarded to the inner action bar content element.	`Ref<HTMLDivElement>`	-
`shouldCloseOnEsc`	Allows Escape to request closing through `onOpenChange`.	`boolean`	`false`
`width`	Width of the action bar in pixels. Falls back to auto width when the viewport is narrower.	`number`	`480`
`...nativeProps`	Native props for the positioned action bar wrapper.	`NativeActionBarProps`	-

Types

type ActionBarOpenChangeHandler = (open: boolean) => void;
 
type NativeActionBarProps = Omit<
  ComponentProps<'div'>,
  | 'children'
  | 'className'
  | 'contentClassName'
  | 'onOpenChange'
  | 'open'
  | 'ref'
  | 'shouldCloseOnEsc'
  | 'width'
>;