npm package: @highlight-ui/action-bar
Description: ActionBar component for the Highlight UI library
Author: Personio GmbH & Co. KG
Latest version: 5.5.3

[![npm](https://img.shields.io/npm/v/@highlight-ui/action-bar)](https://www.npmjs.com/package/@highlight-ui/action-bar)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/8587a8-action-bar/b/381185)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/content-structure-actionbar--default)

# @highlight-ui/action-bar

## Installation

Using npm:

```bash
npm install @highlight-ui/action-bar
```

Using yarn:

```bash
yarn add @highlight-ui/action-bar
```

Using pnpm:

```bash
pnpm install @highlight-ui/action-bar
```

In your (S)CSS file:

```scss
@import url('@highlight-ui/action-bar');
```

Once the package is installed, you can import the library:

```ts
import { ActionBar, ActionBarProps } from '@highlight-ui/action-bar';
```

## Usage

```tsx
import React, { useState } from 'react';
import { ActionBar } from '@highlight-ui/action-bar';

export default function ActionBarExample() {
  return (
    <ActionBar
      variant="inline"
      primaryAction={{
        label: 'Save',
        onClick: callback(action('Primary action clicked')),
      }}
    />
  );
}
```

## Props 📜

| Prop                   | Type                              | Required | Default  | Description                                                                                                                                                                                                                                                                                                         |
| :--------------------- | :-------------------------------- | :------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `variant`              | `'inline', 'fullwidth'`           | Yes      | `inline` | When `inline`, uses `position: sticky` to position the ActionBar and uses `100%` of its container's width. When `full-width`, uses `position: fixed` to position the ActionBar and uses `100% - 64px` (unless used in combination with `elementQuerySelector` prop - check for more info) of its container's width. |
| `primaryAction`        | `ActionButtonProps`               | Yes      |          | Allows passing props to the primary action button                                                                                                                                                                                                                                                                   |
| `secondaryAction`      | `Omit<ActionButtonProps, 'type'>` | No       |          | Allows passing props to the secondary action button                                                                                                                                                                                                                                                                 |
| `information`          | `React.ReactNode`                 | No       |          | Allows rendering any element on the left side of the ActionBar. If specified, the action buttons will be aligned to the right.                                                                                                                                                                                      |
| `elementQuerySelector` | `string`                          | No       |          | Used only when `variant="full-width"` is selected. HTML element with transitionend addEventListener which querySelector calculates width from, example: `[data-test-id="navsidebar-container"]`.                                                                                                                    |

### Custom types 🔠

| Type                              | Values                                                                                                        | Description                          |
| :-------------------------------- | :------------------------------------------------------------------------------------------------------------ | :----------------------------------- |
| `ActionButtonProps`               | `{label: string, onClick?: () => void, buttonState: ButtonProps['buttonState'], type?: ButtonProps['type'];}` | Used for the `primaryAction` props   |
| `Omit<ActionButtonProps, 'type'>` | `{label: string, onClick?: () => void, buttonState: ButtonProps['buttonState']}`                              | Used for the `secondaryAction` props |

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/v/0/p/8587a8-action-bar/b/381185) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).