@storybook-extras/toolbars

Toolbar Buttons

Storybook addon for adding custom toolbar buttons.

Table of Contents

• Getting started
• How to use

Getting started

1. Install the addon:

yarn add @storybook-extras/toolbars -D

1. Add the addon

// .storybook/main.ts
import { StorybookConfig } from '@storybook/angular';
import { ExtrasConfig } from '@storybook-extras/preset';

const config: StorybookConfig & ExtrasConfig = {
    ...
    "addons": [
        "@storybook-extras/toolbars",
        // it will be included automatically if you are using
        // "@storybook-extras/preset",
        ...
    ],
    ...
}

export default config;

How to use

• Simply enable the toolbars through the toolbar or using the parameters like so:

// .storybook/preview.ts
// button.stories.ts
parameters: {
    toolbars: [
        {
            key:'myToolbar',
            title:'My Toolbar',
            icon:'globe',
            // OR emoji: '🌍',
        },
    ],
};