@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 (
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 | 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"]. |

$3

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

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.