PointerBox

PointerBox is a BorderBox component with a caret added to it. It can be styled through independent color-related props or by a pre-defined pointerStyles theme; both as demonstrated below.

Default example

Top PointerBox
Bottom PointerBox
Top-left PointerBox
Left-top PointerBox
Left-bottom PointerBox
Top-right PointerBox
Right-top PointerBox
<PointerBox caret='top' m={4} p={2}>
  Top PointerBox
</PointerBox>
<PointerBox scheme='green' m={4} p={2}>
  Bottom PointerBox
</PointerBox>
<PointerBox scheme='purple' caret='top-left' m={4} p={2}>
  Top-left PointerBox
</PointerBox>
<PointerBox scheme='red' caret='left-top' m={4} p={2}>
  Left-top PointerBox
</PointerBox>
<PointerBox scheme='yellow' caret='left-bottom' m={4} p={2}>
  Left-bottom PointerBox
</PointerBox>
<PointerBox scheme='gray' caret='top-right' m={4} p={2}>
  Top-right PointerBox
</PointerBox>
<PointerBox scheme='black' caret='right-top' m={4} p={2}>
  Right-top PointerBox
</PointerBox>

Custom caret sizes example

PointerBox
PointerBox
<PointerBox my={4} p={2} minHeight={100} scheme={'green'} caretSize={'small'}>
  PointerBox
</PointerBox>
<PointerBox my={6} p={2} minHeight={100} scheme={'purple'} caretSize={'large'} >
  PointerBox
</PointerBox>

Animation with animate

Enable pre-defined animation on any PointerBox instance using the animate prop. Animation takes into account the caret location.

Top Animated PointerBox
Bottom Animated PointerBox
Left Animated PointerBox
Right Animated PointerBox
<PointerBox animate scheme='black' caret='top' m={4} p={2}>
  Top Animated PointerBox
</PointerBox>

<PointerBox animate scheme='black' caret='bottom' m={4} p={2}>
  Bottom Animated PointerBox
</PointerBox>

<PointerBox animate scheme='black' caret='left' m={4} p={2}>
  Left Animated PointerBox
</PointerBox>

<PointerBox animate scheme='black' caret='right' m={4} p={2}>
  Right Animated PointerBox
</PointerBox>

System props

PointerBox components get BACKGROUND, BORDER, LAYOUT and COMMON system props, in addition to the custom VARIANT_POINTER variant. Read the System Props doc page for a full list of available props.

Check out the Animation section to learn more about how this motion utility is used in @bristlecone/components

Component props

NameTypeDefaultDescription
boxShadowStringnoneapply a pre-defined or custom box-shadow effect. Choose from small, medium, xlarge, and a few more. See the theme's shadows key. You can specify your own box-shadow as well.
schemeStringapply a pre-defined theme/style. Available themes are: 'black, gray, green, yellow, purple, red. Custom styles can be applied using the bg and borderColor props
caretStringbottomSets the location of the caret. The format is [edge]-[position on edge]. For example, right-top will position the caret on the top of the right edge of the box. Use top, right, bottom, or left to position a caret in the center of that edge.