@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 of its container's width.
primaryAction	ActionButtonProps	Yes		Allows passing props to the primary action button
secondaryAction	ActionButtonProps	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.

Custom types 🔠

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

Contributing 🖌️

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

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