Button Facets

Overview

The ButtonFacet component in your SDK allows you to render text-based facet options as interactive buttons. This component is particularly useful for providing users with quick, one-click filtering options, such as selecting a specific brand, size, or category. With its customizable properties, you can easily configure the button styles, manage active states, and handle selection events to create a seamless and intuitive filtering experience. This component is ideal for scenarios where you want to emphasize particular options and encourage users to make swift filtering decisions.

Usage

// importing component
import { ButtonFacet } from "@unbxd-ui/react-search-components";
 
// import style for the component
import "@unbxd-ui/react-search-components/styles/buttonFacet.css";

If the styles import does not work, use the following code to import it:

require.resolve("@unbxd-ui/react-search-components/styles/buttonFacet.css")

Live Demo

1. Button Facets as Dropdown

Below facet components are rendered in the form of dropdowns.

In this demo, there are 3 dropdowns. Each dropdown is customised with different combinations of props to display 3 different use cases:

1. In the first dropdown, the facet values are used as what comes default.
2. In the second dropdown, the facet values are displayed along with an icon.
3. In the third dropdown, the facet values are displayed along with their respective color swatch.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { ButtonFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
// code for the above example
const FacetIcons: React.FC<{ item: any; }> = ({ item }) => {
    const genderIcons = {
        "women": "https://imageUrl1.png",
        "men": "https://imageUrl2.png",
        "exp": "https://imageUrl3.png"
    }
 
    const facetItem = Object.keys(genderIcons).filter((key: string) => {
        return item.value?.toLowerCase().includes(key.toLowerCase())
    })[0]
 
    if (!facetItem) return null
    else {
        return <div className="facet-icon-item">
            <img src={genderIcons[facetItem]} alt={`Icon for ${item.label}`} />
            {item.label}
        </div>
    }
}
 
const FacetSwatch: React.FC<{ item: any }> = ({ item }) => {
    return <div className="facet-swatch-wrapper">
        <div className="facet-swatch" style={{ backgroundColor: item.value }}></div>
        {item.label}
    </div>
}
 
// rendering the product grid
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<ButtonFacet
		name="size_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
	/>
	<ButtonFacet
		name="gender_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
	/>
	<ButtonFacet
		name="color_uFilter"
		renderAs="dropdown"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

2. Button Facets as Accordion

Below facet components are rendered in the form of accordions.

In this demo, there are 3 accordions. Each accordion is customised with diefferent combinations of props to display 3 different use cases:

1. In the first accordion, the facet values are used as what comes default.
2. In the second accordion, the facet values are displayed along with an icon.
3. In the third accordion, the facet values are displayed along with their respective color swatch.

import { UnbxdSearchWrapper } from "@unbxd-ui/react-search-hooks";
import { ButtonFacet, Products, SelectedFacets } from "@unbxd-ui/react-search-components";
 
// code for the above example
const FacetIcons: React.FC<{ item: any; }> = ({ item }) => {
    const genderIcons = {
        "women": "https://imageUrl1.png",
        "men": "https://imageUrl2.png",
        "exp": "https://imageUrl3.png"
    }
 
    const facetItem = Object.keys(genderIcons).filter((key: string) => {
        return item.value?.toLowerCase().includes(key.toLowerCase())
    })[0]
 
    if (!facetItem) return null
    else {
        return <div className="facet-icon-item">
            <img src={genderIcons[facetItem]} alt={`Icon for ${item.label}`} />
            {item.label}
        </div>
    }
}
 
const FacetSwatch: React.FC<{ item: any }> = ({ item }) => {
    return <div className="facet-swatch-wrapper">
        <div className="facet-swatch" style={{ backgroundColor: item.value }}></div>
        {item.label}
    </div>
}
 
// rendering the product grid
<UnbxdSearchWrapper>
	...
	<SelectedFacets />
	<ButtonFacet
		name="size_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		defaultOpen={false}
	/>
	<ButtonFacet
		name="gender_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetIcons}
		defaultOpen={false}
	/>
	<ButtonFacet
		name="color_uFilter"
		renderAs="accordion"
		applyAll={true}
		searchable={true}
		multiselect={true}
		clearBtn={true}
		selectAll={true}
		showSelectedFacets={true}
		CustomComponent={FacetSwatch}
		defaultOpen={false}
	/>
	<Products />
	...
</UnbxdSearchWrapper>

Props

• The name of the facet in the feed for which you want to display the component.

• If you want to show the facet as a dropdown or accordion.
• Values: accordion OR dropdown.
• Default Value: accordion.

• This prop, when set to true, adds a search bar to the component. This allows users to quickly filter and find facet values that match their typed query, enhancing usability for large lists of options.
• Default Value: true.

• The text that will be used as a placeholder for the search bar component.
• Default Value: "Search facet value...".

• Determines if multiple facet values can be selected at once or not.
• Default Value: true.

• Controls whether the facet component can be expanded or collapsed. If disabled, the component will remain open, and users will not be able to collapse it by clicking.
• This is only functional when the facet is rendered as an accordion.
• Default Value: true.

• This setting determines whether the facet component is initially collapsed or open by default.
• This is only functional when the facet is rendered as an accordion and isCollapsible is set to true.
• Default Value: true.

• Specifies whether a button should be provided to apply all facets at once.
• This button will only appear if multiselect is enabled and facet values are not rendered as radio buttons.
• Default Value: true.

• The text to be displayed on the applyAll button.
• Default Value: All.

• Specifies whether a button should be provided to clear all applied facets at once.
• Default Value: true.

• The text to be displayed on the clearAll button.
• Default Value: Clear.

• Specifies whether the selected facets for a particular facet name should be displayed within the facets component.
• Default Value: true.

• Specifies the number of facet values to display, hiding any additional values beyond this limit.
• Default Value: 0.

• A custom component that has to return a clickable element to display all facet values beyond the set limit.

• This is only functional if viewMoreLimit is set to a value greater than 0.

• Default Value:

const ViewMoreComponent = ({ showRemainingNumber, remainingNumber, styles }) => {
	return <div className={styles?.showMore}>{showRemainingNumber ? `+${remainingNumber} more` : `+ show all`}</div>;
};

• A custom component that has to return a clickable element, which when clicked will render only the viewMoreLimit number of facet values.
• Default Value:

const ViewLessComponent = ({ styles }) => {
	return <div className={styles?.showLess}>-show less</div>;
};

• This configuration is used by the ViewMoreComponent to display the remaining number in the 'view more' text, e.g., '+25 more'.
• If this is not enabled, only simple text will be shown, e.g., 'view more'.

• The function that is called when the query is changed in the facet value search bar.
• Default Value:

const searchCallback = () => {};

• The IconComponent prop allows you to pass a custom icon component that will be displayed alongside the facet name in the facet header. This provides a way to visually enhance the facet presentation, making it more intuitive and aligned with your application's design.
• Default Value:

const IconComponent = ({ styles }) => {
	return <div className={styles?.icon}>&#8964;</div>;
};

• The highly customisable component which will be used to display each facet item.
• Default Value:

const CustomComponent = (props) => {
	const { item } = props;
	return item.label;
};

• The component that will be used as the facets component activator. Clicking this will show/hide the facet values.
• Default Value:

const ActivatorComponent = ({ selected, styles }: { selected?: any, styles: any }) => {
	return <div className={styles?.activatorWrapper || defaultSortDropdownProps.styles?.activatorWrapper}>
		<div className={styles?.activatorText || defaultSortDropdownProps.styles?.activatorText}>
			{typeof selected == "object" ? selected.label : "Select"}
		</div>
		<div className={styles?.activatorIcon || defaultSortDropdownProps.styles?.activatorIcon}>
			&#8964;
		</div>
	</div>
}

• This prop will be used to style the component.
• The value must use a defined structure (the structure can be seen in the following example).
• The keys in the structure must be the same while the values can changed as per the user's choice.

styles={{
	root: "facets-root", // used for the facet component wrapper
	header: "facets-header", // used for the facet header
	displayName: "facets-displayName", // used for the facet name in the header
	icon: "facets-icon", // used for the toggle collapsible icon
	body: "facets-body", // used for the facet values wrapper
	buttonGroupRoot: "button-grp-wrapper", // used for the wrapper for the facet buttons wrapper
	buttonGroupBtn: "button-grp-btn", // used for each facet value button
	selected: "button-selected", // used for the selected facet value button
	selectedFilters: "inside-selectedFilters", // used for the selected facets wrapper
	selectedFiltersItem: "inside-selectedFilters-items", // used for each selected facet value
	searchInput: "facet-search-input", // used for the search input eleemnt
	btnWrapper: "dd-btnGrp", // used for the wrapper component of the apply/clear buttons
	applyAllBtn: "apply-btn", // used for the 'apply all' button
	clearAllBtn: "clear-btn", // used for the 'clear all' button
	showMore: "showMore", // used for the 'show more' button
	showLess: "showLess", // used for the 'show less' button
}}

Related Hook

To use the Unbxd ReactJS SDK without the pre-built ButtonFacet component, add the functionality to your custom component using the useFacets hook. Refer to the documentation for more details.

Related Components

Checkbox FacetRadio Button FacetMultilevel FacetRange FacetSelected Facets