@highlight-ui/action-bar

@highlight-ui/action-bar

Installation

Using npm:

npm install @highlight-ui/action-bar

Using yarn:

yarn add @highlight-ui/action-bar

Using pnpm:

pnpm install @highlight-ui/action-bar

In your (S)CSS file:

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

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

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

Usage

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 for usage guidelines and visual examples.

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