# @storybook-extras/toolbars

> Storybook addon for adding custom toolbar buttons.

Latest version **0.0.68** (published 2023-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @storybook-extras/toolbars
pnpm add @storybook-extras/toolbars
yarn add @storybook-extras/toolbars
bun add @storybook-extras/toolbars
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.68 |
| Published | 2023-03-01 |
| First published | 2023-01-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Mostafa Sherif |
| Maintainers | mosherif87 |
| Keywords | storybook, addons, extras, custom, toolbars, buttons |

## Links

- npm: https://www.npmjs.com/package/@storybook-extras/toolbars
- Repository: https://github.com/sheriffMoose/storybook-extras
- Homepage: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/toolbars#readme
- Issues: https://github.com/sheriffMoose/storybook-extras/issues
- Funding: https://github.com/sheriffMoose/storybook-extras?sponsor=1
- npm.io page: https://npm.io/package/@storybook-extras/toolbars

## Recent versions

- 0.0.68 (latest) — 2023-03-01
- 0.0.51--canary.21.4060555582.0 (canary) — 2023-02-01
- 0.0.67 — 2023-02-11
- 0.0.66 — 2023-02-05
- 0.0.65 — 2023-02-05
- 0.0.64 — 2023-02-04
- 0.0.63 — 2023-02-04
- 0.0.62 — 2023-02-04
- 0.0.61 — 2023-02-04
- 0.0.60 — 2023-02-04
- 0.0.59 — 2023-02-04
- 0.0.58 — 2023-02-03
- 0.0.57 — 2023-02-03
- 0.0.56 — 2023-02-03
- 0.0.55 — 2023-02-03
- … 32 more at https://npm.io/package/@storybook-extras/toolbars/versions

## README

<div align="center">

<img src="https://raw.githubusercontent.com/sheriffMoose/storybook-extras/master/logos/toolbars.svg" alt="logo" width="200" />

<h1>Toolbar Buttons</h1>

<p>Storybook addon for adding custom toolbar buttons.</p>

![][img.node]
![][img.npm]
[![][img.storybook]][link.npm]

[![][img.banner]][link.npm]

</div>

<h2>Table of Contents</h2>

- [Getting started](#getting-started)
- [How to use](#how-to-use)

## Getting started

1. Install the addon:

```shell
yarn add @storybook-extras/toolbars -D
```

1. Add the addon

```ts
// .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:

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




[img.node]:
https://img.shields.io/node/v/@storybook-extras/toolbars?logo=node.js&logoColor=white&labelColor=339933&color=grey&label=
[img.npm]:
https://img.shields.io/npm/v/@storybook-extras/toolbars?logo=npm&logoColor=white&labelColor=CB3837&color=grey&label=

[img.storybook]:
https://img.shields.io/npm/dependency-version/@storybook-extras/toolbars/dev/storybook?logo=storybook&logoColor=white&labelColor=FF4785&color=grey&label=

[img.banner]:
https://nodei.co/npm/@storybook-extras/toolbars.png

[link.npm]:
https://npmjs.org/package/@storybook-extras/toolbars

---
_Source: https://npm.io/package/@storybook-extras/toolbars · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._