SVAR React Toolbar

Documentation • Demos

SVAR React Toolbar is a customizable React UI component that helps you build panels of buttons and icons, giving users quick access to key actions and tools in your app. It supports different button types, multi-line toolbars, collapsible button groups, and responsive layouts that adapt to different screen sizes. Compatible with React 18 and 19.

:hammer_and_wrench: How to Use

To use SVAR React Toolbar, simply import the package and include the component in to .jsx file:

    import { Toolbar } from "@svar-ui/react-toolbar";
    import "@svar-ui/react-toolbar/all.css";

    function MyComponent(){
        const items = [
            { id: 'label', text: 'Toolbar with icon buttons' },
            { id: 'search', comp: 'button', icon: 'wxi-search' },
            { comp: 'spacer' },
            { id: 'edit', comp: 'button', icon: 'wxi-edit-outline'}
        ];

        return (<Toolbar items={items} />);
    }