Buttons

Filter Bar Button

Storybook

The FilterBarButton component allows you to create interactive filter buttons with a customizable popover, ideal for implementing filters and actions in web applications.

Imports

The first alternative is recommended as it can reduce the application bundle

1import FilterBarButton from 'dd360-ds/FilterBarButton'

1import { FilterBarButton } from 'dd360-ds'

Usage

The FilterBarButton component requires at least the label and valueBadge properties. The popover will be displayed when clicking the button.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6/>
7

IconLeft

The IconLeft prop allows you to add an icon to the left side of the filter button.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
7/>
8

IconRight

The iconRight prop allows you to add an icon to the right side of the filter button.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
7/>
8

TitlePopover

The titlePopover prop allows you to customize the title displayed in the filter button's popover.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  titlePopover='Title Popover'
7/>
8

ChildrenPopover

The childrenPopover prop allows you to add custom content inside the filter button's popover.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  childrenPopover={<div className='p-6'>Children Popover</div>}
7/>
8

ClassNamePopover

The classNamePopover prop allows you to apply custom CSS classes to the filter button's popover.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  classNamePopover='text-blue-300'
7  childrenPopover={<div className='p-6'>Children Popover</div>}
8/>
9

SecondaryButton

The secondaryButton prop allows you to configure a secondary button in the popover with its label and click handler.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
7/>
8

PrimaryButton

The primaryButton prop allows you to configure a primary button in the popover with its label and click handler.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
7/>
8

PrincipalButton

The principalButton prop allows you to configure the behavior of the main button that triggers the popover.

The following code snippet shows how to use the FilterBarButton component:

1import { FilterBarButton } from 'dd360-ds'
2
3<FilterBarButton
4  label="Filter"
5  valueBadge={3}
6  principalButton={{ onClick:()=>{alert('Active Popover')}}}
7/>
8

API Reference

Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.