Background Color
Use bg prop to control the background color of an element.
Name | Value |
|---|---|
bg.accent | |
bg.accent.hovered | |
bg.accent.light | |
bg.accent.pressed | |
bg.accent.subtle | |
bg.avatar.neutral | |
bg.avatar.purple | |
bg.default | |
bg.default.hovered | |
bg.default.inverse | |
bg.default.inverse.hovered | |
bg.default.inverse.pressed | |
bg.default.pressed | |
bg.error | |
bg.error.hovered | |
bg.error.light | |
bg.error.pressed | |
bg.error.subtle | |
bg.error.subtlest | |
bg.information | |
bg.information.light | |
bg.information.subtle | |
bg.overlay | |
bg.page | |
bg.secondary | |
bg.secondary.hovered | |
bg.spinner.default | |
bg.spinner.inverse | |
bg.success | |
bg.success.hovered | |
bg.success.light | |
bg.success.subtle | |
bg.tertiary | |
bg.tertiary.hovered | |
bg.warning | |
bg.warning.hovered | |
bg.warning.light | |
bg.warning.subtle | |
current | |
transparent |
#
Documentation
#
#
Usage
#
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box bg="bg.accent">bg=bg.accent</Box>
<Box bg="bg.error">bg=bg.error</Box>
</Canvas>
);
}