created:4/29/2021
updated:4/29/2021
loc
71
comments
24%
passed
26
coverage
79%
Shield
A container component to display label/value pairs, where the value is colord. Similar design to github shields.
Name | Description | Default | Controls |
|---|---|---|---|
| label | shield label/text string | - | |
| color | background color for the value.
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. string | #227fc0 |
Name | Description | Default | |
|---|---|---|---|
ShieldProps(4 properties) | |||
| label | shield label/text string | - | |
| value | value displayed with background color stringnumber | - | |
| percent | if true, treat the value as a percentage number from 0 to 100 boolean | false | |
| color | background color for the value.
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. string | #227fc0 | |
-(1 properties) | |||
SpaceProps(28 properties) | |||
HTMLAttributes(43 properties) | |||
Attributes(1 properties) | |||
AriaAttributes(48 properties) | |||
DOMAttributes(161 properties) | |||
BoxOwnProps(3 properties) | |||
BackgroundColorProps(2 properties) | |||
OpacityProps(1 properties) | |||
package | imports | peer |
|---|---|---|
@theme-ui/color ^0.8.4 | getColor | |
polished | mix | |
react ^17.0.1 | FC | * |
theme-ui ^0.8.4 | jsxThemeBoxPropsBox | |
tinycolor2 ^1.4.1 | tinycolor |
file | imports |
|---|---|
| "../ThemeContext" | useTheme |