PointerBox

Examples

<PointerBox minHeight={100} sx={{m: 4, p: 2, bg: 'success.subtle', borderColor: 'success.emphasis'}}>
  PointerBox
</PointerBox>

Caret position

function PointerBoxDemo(props) {
  const [pos, setPos] = React.useState('top')

  return (
    <Box>
      <Heading as="h3" sx={{fontSize: 3}}>
        Caret Position
      </Heading>
      <CaretSelector current={pos} onChange={setPos} />
      <Box position="relative">
        <PointerBox
          minHeight={100}
          caret={pos}
          sx={{m: 4, p: 2, bg: 'success.subtle', borderColor: 'success.emphasis'}}
        >
          Content
        </PointerBox>
      </Box>
    </Box>
  )
}

function CaretSelector(props) {
  const choices = [
    'top',
    'bottom',
    'left',
    'right',
    'left-bottom',
    'left-top',
    'right-bottom',
    'right-top',
    'top-left',
    'bottom-left',
    'top-right',
    'bottom-right',
  ].map(dir => (
    <label key={dir}>
      <input
        type="radio"
        name="caret"
        value={dir}
        checked={dir === props.current}
        onChange={() => props.onChange(dir)}
      />{' '}
      {dir}
    </label>
  ))

  return (
    <Box display="grid" gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
      {choices}
    </Box>
  )
}

render(<PointerBoxDemo />)

Props

PointerBox

| 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'

Status

Alpha

• Component props and basic example usage of the component are documented on primer.style/react.
• Component does not have any unnecessary third-party dependencies.
• Component can adapt to different themes.
• Component can adapt to different screen sizes.
• Component has robust unit test coverage (100% where achievable).
• Component has visual regression coverage of its default and interactive states.
• Component does not introduce any axe violations.
• Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

• Component is used in a production application.
• Common usage examples are documented on primer.style/react.
• Common usage examples are documented in storybook stories.
• Component has been reviewed by a systems designer and any resulting issues have been addressed.
• Component does not introduce any performance regressions.

Stable

• Component API has been stable with no breaking changes for at least one month.
• Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
• Component has corresponding design guidelines documented in the interface guidelines.
• Component has corresponding Figma component in the Primer Web library.
• Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.

Related components

• Popover