ContextualHelp

Contextual help shows a user extra information about the state of an adjacent component, or a total view.

variant

size

placement

import {ContextualHelp, Heading, Content, Footer, Link} from '@react-spectrum/s2';

<ContextualHelp>
  <Heading>Permission required</Heading>
  <Content>Your admin must grant you permission before you can create a segment.</Content>
  <Footer>
    <Link isStandalone href="#" target="_blank">Learn more about segments</Link>
  </Footer>
</ContextualHelp>

API

<ContextualHelp>
  <Heading />
  <Content />
  <Footer />
</ContextualHelp>

ContextualHelp

Name	Type	Default
`placement`	`Placement`	Default: `'bottom start'`
The placement of the popover with respect to the action button.
`children`	`ReactNode`	Default: —
Contents of the Contextual Help popover.
`size`	`'XS' \| 'S'`	Default: `'XS'`
The size of the ActionButton.
`variant`	`'info' \| 'help'`	Default: `'help'`
Indicates whether contents are informative or provides helpful guidance.
`styles`	`StylesProp`	Default: —
Spectrum-defined styles, returned by the `style()` macro.