Lucent UI
← AnnouncementCardBulkActionBar
✦ LLM-ready

BulkActionBar

pattern

Bulk action bar that appears when items are selected in a list or table. Shows selection count with select-all, action buttons, and a clear selection control. Includes minimal and extended variants. Composes Card, Row, Text, Chip, Button, and Divider.

"Build a BulkActionBar pattern from lucent-ui. Show a selection count Chip, action Buttons (Archive, Move, Delete), and a Clear selection ghost Button. Wrap in a filled Card."

Usage

React / JSX
import { Card, Row, Text, Chip, Button, Divider } from 'lucent-ui'

<BulkActionBar />

Installation

pnpm add lucent-ui

API Reference

BulkActionBar props — * required

PropTypeDefaultDescription
Cardcomponent—Filled surface container for the bar.
Chipcomponent—Selection count indicator.
Buttoncomponent—Action buttons (Archive, Move, Delete, Clear).
Dividercomponent—Vertical separator between count and actions.
Rowcomponent—Horizontal layout for the bar.
Textcomponent—Labels and helper text.