5.4.2 • Published 3 months ago

@highlight-ui/action-bar v5.4.2

Weekly downloads
-
License
MIT
Repository
-
Last release
3 months ago

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 📜

PropTypeRequiredDefaultDescription
variant'inline', 'fullwidth'YesinlineWhen 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.
primaryActionActionButtonPropsYesAllows passing props to the primary action button
secondaryActionOmit<ActionButtonProps, 'type'>NoAllows passing props to the secondary action button
informationReact.ReactNodeNoAllows rendering any element on the left side of the ActionBar. If specified, the action buttons will be aligned to the right.
elementQuerySelectorstringNoUsed 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 🔠

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

@highlight-ui/button@highlight-ui/utils-commons
@infinitebrahmanuniverse/nolb-_hig@everything-registry/sub-chunk-395@zalastax/nolb-_hig
5.4.2

3 months ago

5.4.1

5 months ago

5.3.2

7 months ago

5.3.1

7 months ago

5.3.0

7 months ago

5.0.20

9 months ago

5.0.9

10 months ago

5.0.8

10 months ago

5.0.7

10 months ago

5.0.6

10 months ago

5.0.5

10 months ago

5.4.0

7 months ago

5.0.4

10 months ago

5.0.10

10 months ago

5.0.11

10 months ago

5.0.12

10 months ago

5.0.13

10 months ago

5.0.14

10 months ago

5.0.15

10 months ago

5.0.16

9 months ago

5.0.17

9 months ago

5.0.18

9 months ago

5.0.19

9 months ago

5.3.0-r18.0

8 months ago

5.1.1

9 months ago

5.1.0

9 months ago

5.2.10

7 months ago

5.2.9

7 months ago

5.2.8

7 months ago

5.2.7

7 months ago

5.2.6

8 months ago

5.2.5

8 months ago

5.2.4

8 months ago

5.2.3

8 months ago

5.2.2

8 months ago

5.2.1

9 months ago

5.2.0

9 months ago

5.0.3

11 months ago

5.0.2

11 months ago

5.0.1

11 months ago

5.0.0

11 months ago

4.2.20

12 months ago

4.2.21

12 months ago

4.2.22

12 months ago

4.2.19

12 months ago

4.2.17

1 year ago

4.2.18

1 year ago

4.2.14

1 year ago

4.2.15

1 year ago

4.2.16

1 year ago

4.2.10

1 year ago

4.2.11

1 year ago

4.2.12

1 year ago

4.2.13

1 year ago

4.2.9

1 year ago

4.2.8

1 year ago

4.1.8

1 year ago

4.1.7

1 year ago

4.1.9

1 year ago

4.0.27

1 year ago

4.2.3

1 year ago

4.2.2

1 year ago

4.2.5

1 year ago

4.2.4

1 year ago

4.2.1

1 year ago

4.2.0

1 year ago

4.2.7

1 year ago

4.2.6

1 year ago

4.1.10

1 year ago

4.1.11

1 year ago

4.1.12

1 year ago

4.1.13

1 year ago

4.1.14

1 year ago

4.1.15

1 year ago

4.1.4

1 year ago

4.1.3

1 year ago

4.1.6

1 year ago

4.1.5

1 year ago

4.1.0

1 year ago

4.1.2

1 year ago

4.1.1

1 year ago

4.0.19

2 years ago

4.0.21

2 years ago

4.0.20

2 years ago

4.0.23

2 years ago

4.0.22

2 years ago

4.0.25

2 years ago

4.0.18

2 years ago

4.0.16

2 years ago

4.0.15

2 years ago

4.0.17

2 years ago

4.0.0-alpha.1

2 years ago

4.0.5

2 years ago

4.0.4

2 years ago

4.0.10

2 years ago

4.0.7

2 years ago

4.0.6

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

4.0.12

2 years ago

4.0.11

2 years ago

4.0.14

2 years ago

4.0.13

2 years ago

4.0.8

2 years ago

4.0.0-alpha.0

2 years ago

3.0.16

2 years ago

3.0.14

2 years ago

3.0.15

2 years ago

3.0.12

2 years ago

3.0.13

2 years ago

3.0.11

2 years ago

3.0.9

2 years ago

3.0.10

2 years ago

3.0.8

2 years ago

3.0.7

2 years ago

3.0.6

2 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.0.5

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.0.18

3 years ago

2.0.16

3 years ago

2.0.17

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.11

3 years ago

2.0.12

3 years ago

2.0.10

3 years ago

2.0.7

3 years ago

2.0.9

3 years ago

2.0.8

3 years ago

2.0.5

3 years ago

2.0.6

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

2.0.0

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago