npm

@highlight-ui/action-bar
TypeScript icon, indicating that this package has built-in type declarations

5.4.4 • Public • Published

npm personio.design storybook.personio.design

@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.

Readme

Keywords

none

Package Sidebar

Install

npm i @highlight-ui/action-bar

Weekly Downloads

308

Version

5.4.4

License

MIT

Unpacked Size

62.2 kB

Total Files

13

Last publish

Collaborators

  • kbpersonio
  • ante.zebic
  • mislav_lukac_personio_ext
  • cusero
  • jordan-personio
  • personio-npm-ci
  • riain-personio
  • amadeofrompersonio
  • yunxi-yang
  • andresfrompersonio