Skip to main contentPrimer

PointerBox

A customisable bordered box with a caret pointer

Page navigation navigation

React
readyNot reviewed for a11y
Storybook|Source

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

NameDefaultDescription
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

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

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

caret
'bottom'
| '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

Related components