created:3/5/2021
updated:3/5/2021
loc
46
comments
43%
passed
12
coverage
67%
Tag
A container component to display text in a colored box, with a semi-transparent background.
Name | Description | Default | Controls |
|---|---|---|---|
| color | color for the tag. The full color will be applied to the border and a transparentized color will be used as background
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 | white |
Name | Description | Default | |
|---|---|---|---|
TagProps(5 properties) | |||
| color | color for the tag. The full color will be applied to the border and a transparentized color will be used as background
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 | white | |
| transparentAmount | transparent amount - 0 to 1 number | 0.85 | |
| borderSize | borderSize in pixels number | 2 | |
| variant | theme variant additional string | - | |
| raw | raw string value to be injected. Useful for highlighting searh results string | - | |
-(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) | |||
16 commits
package | imports | peer |
|---|---|---|
@theme-ui/color ^0.8.4 | transparentizegetColor | |
@theme-ui/css ^0.8.4 | get | |
react ^17.0.1 | ReactTextFC | * |
theme-ui ^0.8.4 | jsxThemeTextBoxPropsBox |
file | imports |
|---|---|
| "../ThemeContext" | useTheme |