metamask-extension/ui/components/component-library/popover-header

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
import { PopoverHeader } from './popover-header';

# PopoverHeader

`PopoverHeader` handles the title, close button and back button for all `Popover` components. It is built on top of the [HeaderBase](/docs/components-componentlibrary-headerbase--default-story) component

<Canvas>
  <Story id="components-componentlibrary-popoverheader--default-story" />
</Canvas>

## Props

The `PopoverHeader` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props

<ArgsTable of={PopoverHeader} />

### Children

The title of the `PopoverHeader` component. Passing a `string` will render the content inside of a `Text` component. Passing any other type will render the content as is.

<Canvas>
  <Story id="components-componentlibrary-popoverheader--children" />
</Canvas>

```jsx
import {
  TextVariant,
  TextAlign,
  DISPLAY,
  FLEX_DIRECTION,
  AlignItems,
  JustifyContent,
} from '../../../helpers/constants/design-system';

import { PopoverHeader,  AvatarAccount, Text } from '../../component-library';

<PopoverHeader {...args} marginBottom={4}>
  Children as string
</PopoverHeader>
<PopoverHeader
  {...args}
  childrenWrapperProps={{
    display: DISPLAY.FLEX,
    flexDirection: FLEX_DIRECTION.COLUMN,
    alignItems: AlignItems.center,
    justifyContent: JustifyContent.center,
  }}
>
  <AvatarAccount address="0x1234" />
  <Text variant={TextVariant.headingSm} textAlign={TextAlign.Center}>
    Custom header using multiple components
  </Text>
</PopoverHeader>
```

### onBack

Use the onClick handler `onBack` prop to render the `ButtonIcon` back button in the startAccessory position.

Use the `backButtonProps` prop to pass additional props to the `ButtonIcon` back button.

<Canvas>
  <Story id="components-componentlibrary-popoverheader--on-back" />
</Canvas>

```jsx
import { PopoverHeader } from '../../component-library';

<PopoverHeader onBack={() => console.log('Back button click')}>
  OnBack Demo
</PopoverHeader>;
```

### onClose

Use the onClick handler `onClose` prop to render the `ButtonIcon` back button in the endAccessory position.

Use the `backButtonProps` prop to pass additional props to the `ButtonIcon` back button.

<Canvas>
  <Story id="components-componentlibrary-popoverheader--on-close" />
</Canvas>

```jsx
import { PopoverHeader } from '../../component-library';

<PopoverHeader onClose={() => console.log('Back button click')}>
  OnClose Demo
</PopoverHeader>;
```

### startAccessory

Use the `startAccessory` prop to render a component in the startAccessory position. This will override the default back `ButtonIcon`.

<Canvas>
  <Story id="components-componentlibrary-popoverheader--start-accessory" />
</Canvas>

```jsx
import { PopoverHeader, Button, BUTTON_SIZES } from '../../component-library';

<PopoverHeader startAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}>
  StartAccessory
</PopoverHeader>;
```

### endAccessory

Use the `endAccessory` prop to render a component in the endAccessory position. This will override the default close `ButtonIcon`.

<Canvas>
  <Story id="components-componentlibrary-popoverheader--end-accessory" />
</Canvas>

```jsx
import { PopoverHeader, Button, BUTTON_SIZES } from '../../component-library';

<PopoverHeader endAccessory={<Button size={BUTTON_SIZES.SM}>Demo</Button>}>
  EndAccessory
</PopoverHeader>;
```