Context Switching

ToolbarSection and ToolbarContext enable smooth animated transitions between different sets of tools. When activeContext changes, the current buttons fade out, the section morphs to the new size, then the new buttons fade in.

function ContextualToolbar() {
    const [mode, setMode] = useState('drawing');

    return (
        <Toolbar>
            <ToolbarButton icon='pi pi-arrow-up-left' title='Select' />
            <ToolbarSection activeContext={mode}>
                <ToolbarContext name='drawing'>
                    <ToolbarButton icon='pi pi-pencil' title='Draw' />
                    <ToolbarButton icon='pi pi-stop' title='Rectangle' />
                    <ToolbarButton icon='pi pi-circle' title='Circle' />
                </ToolbarContext>
                <ToolbarContext name='text'>
                    <ToolbarButton icon='pi pi-align-left' title='Align Left' />
                    <ToolbarButton icon='pi pi-align-center' title='Align Center' />
                </ToolbarContext>
            </ToolbarSection>
            <ToolbarButton icon='pi pi-undo' title='Undo' />
        </Toolbar>
    );
}

Only the section transitions — buttons outside the section are unaffected.