PointerBox
A customisable bordered box with a caret pointer
Page navigation navigation
React
readyNot reviewed for a11y
React examples
Default
Pointer box content
Caret position
Pointer box content
Custom background color
Pointer box content
Custom border color
Pointer box content
Props
PointerBox
| Name | Required | Description |
|---|---|---|
bg | string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }Background color of the box
The color utility parses a component's `color` and `bg` props and converts them into CSS declarations.
By default the raw value of the prop is returned.
Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation.
Array values are converted into responsive values.
[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) | |
border | string | number | string & (Border<TLengthStyledSystem> | null)[] | string & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; } | number & (Border<TLengthStyledSystem> | null)[] | number & { [x: string]: Border<TLengthStyledSystem> | undefined; [x: number]: Border<TLengthStyledSystem> | undefined; }Width of the border around the box
The border CSS property sets an element's border. It's a shorthand for border-width, border-style,
and border-color.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border) | |
borderColor | string | string & (string | number | symbol | null)[] | string & { [x: string]: string | number | symbol | undefined; [x: number]: string | number | symbol | undefined; }Color of the border around the box
The border-color shorthand CSS property sets the color of all sides of an element's border.
[MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color) | |
caret | | 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom'Sets 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 |