@undefine-ui/design-system 3.11.0 → 3.12.0

package/README.md

@@ -603,6 +603,7 @@ import {
   ToolbarSettingsButton,
   ToolbarTodayButton,
   ToolbarDatePickerButton,
+  ToolbarSelectionButton,
   FilterDropdown,
   SortDropdown,
   DateRangeDropdown,
@@ -614,6 +615,12 @@ import {
 // Base toolbar button with icon and label
 <ToolbarButton icon="Filter" label="Filter" onClick={handleClick} />
 
+// Base toolbar button with custom children (icon and label are ignored when children provided)
+<ToolbarButton>
+  <CustomIcon />
+  <span>Custom Content</span>
+</ToolbarButton>
+
 // Specialized button components
 <ToolbarFilterButton onClick={handleFilter} />
 <ToolbarSortButton onClick={handleSort} />
@@ -621,6 +628,11 @@ import {
 <ToolbarTodayButton onClick={handleToday} />
 <ToolbarDatePickerButton label="Last 30 days" onClick={handleDate} />
 
+// Selection button - shows count with clear action
+<ToolbarSelectionButton count={3} onClear={() => clearSelection()} />
+<ToolbarSelectionButton count={5} label="items" onClear={handleClear} />
+<ToolbarSelectionButton count={3} showClearButton={false} />
+
 // Search field with clear button
 <ToolbarSearchField
   value={search}
@@ -677,12 +689,21 @@ const sortOptions: SortOption[] = [
 
 **ToolbarButton Props:**
 
-- `icon` - Icon name from the icon library
-- `label` - Button label text
+- `icon` - Icon name from the icon library (used when children is not provided)
+- `label` - Button label text (used when children is not provided)
+- `children` - Custom content to render. When provided, icon and label props are ignored
 - `open` - Whether the button is in open/active state
 - `disabled` - Disable the button
 - All standard MUI ButtonBase props
 
+**ToolbarSelectionButton Props:**
+
+- `count` - Number of selected items (required)
+- `label` - Text after the count (default: `'selected'`)
+- `onClear` - Callback when the clear button is clicked
+- `showClearButton` - Whether to show the clear button (default: `true`)
+- All standard MUI ButtonBase props (except `icon`, `open`, `children`)
+
 **FilterDropdown Props:**
 
 - `children` - Content to render inside the popover (use Form + Field components)