## Import

```jsx
import { ContextualHelp } from "@cfa/react-core";
```

## Live Editor

```jsx
<ContextualHelp aria-label="need-help">
  <Heading variant="headline4">Need Help?</Heading>
  If you're having issues accessing your account, contact our customer support
  team for help.
</ContextualHelp>
```

## Examples

### Variant

The ContextualHelp component supports two icon variants: `info` (default) and `help`.

```jsx
<div style={{ display: "flex", gap: 16 }}>
  <ContextualHelp aria-label="information" variant="info">
    <Heading variant="headline4">Information</Heading>
    This is additional contextual information to help you understand this
    feature.
  </ContextualHelp>
  <ContextualHelp aria-label="need-help" variant="help">
    <Heading variant="headline4">Need Help?</Heading>
    If you're having issues, contact our customer support team for help.
  </ContextualHelp>
</div>
```

### Size

Control the size of the icon button using the `size` prop.

```jsx
<div style={{ display: "flex", gap: 16, alignItems: "center" }}>
  <ContextualHelp aria-label="extra-small" size="xs">
    <Heading variant="headline4">Extra Small</Heading>
    This is extra small contextual help.
  </ContextualHelp>
  <ContextualHelp aria-label="small" size="sm">
    <Heading variant="headline4">Small</Heading>
    This is small contextual help.
  </ContextualHelp>
  <ContextualHelp aria-label="medium" size="md">
    <Heading variant="headline4">Medium</Heading>
    This is medium contextual help.
  </ContextualHelp>
  <ContextualHelp aria-label="large" size="lg">
    <Heading variant="headline4">Large</Heading>
    This is large contextual help.
  </ContextualHelp>
  <ContextualHelp aria-label="extra-large" size="xl">
    <Heading variant="headline4">Extra Large</Heading>
    This is extra large contextual help.
  </ContextualHelp>
</div>
```

### Placement

Control where the popover appears relative to the trigger button using the `placement` prop. The default placement is `"bottom left"`.

```jsx
<div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
  <ContextualHelp aria-label="top" placement="top">
    <Heading variant="headline4">Top</Heading>
    This popover appears above the button.
  </ContextualHelp>
  <ContextualHelp aria-label="bottom" placement="bottom">
    <Heading variant="headline4">Bottom</Heading>
    This popover appears below the button.
  </ContextualHelp>
  <ContextualHelp aria-label="left" placement="left">
    <Heading variant="headline4">Left</Heading>
    This popover appears to the left of the button.
  </ContextualHelp>
  <ContextualHelp aria-label="right" placement="right">
    <Heading variant="headline4">Right</Heading>
    This popover appears to the right of the button.
  </ContextualHelp>
  <ContextualHelp aria-label="top-left" placement="top left">
    <Heading variant="headline4">Top Left</Heading>
    This popover appears at the top left.
  </ContextualHelp>
  <ContextualHelp aria-label="bottom-right" placement="bottom right">
    <Heading variant="headline4">Bottom Right</Heading>
    This popover appears at the bottom right.
  </ContextualHelp>
</div>
```

## Props

### ContextualHelp

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | - |
| placement | `Placements` | `bottom left` | The placement of the element with respect to its anchor element. |
| size | `"xs" \ | "sm" \ | "md" \ | "lg" \ | "xl"` | `md` | - |
| variant | `"help" \ | "info"` | `info` | - |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| defaultOpen | `boolean` | - | Whether the overlay is open by default (uncontrolled). |
| isOpen | `boolean` | - | Whether the overlay is open by default (controlled). |
| onOpenChange | `(isOpen: boolean) => void` | - | Handler that is called when the overlay's open state changes. |