Text Color
Use color prop to control the text color of an element.
Name | Value |
|---|---|
current | |
fg.accent | |
fg.accent.hovered | |
fg.accent.strong | |
fg.avatar.neutral | |
fg.avatar.purple | |
fg.default | |
fg.default.inverse | |
fg.disabled | |
fg.error | |
fg.error.hovered | |
fg.error.light | |
fg.error.strong | |
fg.information | |
fg.information.light | |
fg.information.strong | |
fg.link.default | |
fg.link.default.hovered | |
fg.link.inverse | |
fg.link.subtle | |
fg.link.visited | |
fg.secondary | |
fg.spinner.default | |
fg.spinner.inverse | |
fg.success | |
fg.success.hovered | |
fg.success.light | |
fg.success.strong | |
fg.tertiary | |
fg.warning | |
fg.warning.hovered | |
fg.warning.inverse | |
fg.warning.light | |
fg.warning.strong | |
fg.white | |
transparent |
#
Documentation
#
#
Usage
#
import { Box } from "@optiaxiom/react";
import { Canvas } from "../Canvas";
export function App() {
return (
<Canvas>
<Box color="fg.accent.strong">
The quick brown fox jumps over the lazy dog.
</Box>
</Canvas>
);
}