Overview

About

Getting Started

Layout

Box

Flex

Grid

Components

Accordion

Badge

Button

Checkbox

Panel

Portal

Progress Bar

Select

Skeleton

Separator

Switch

Theme

Tooltip

Properties

Color

Margin

Padding

Radius

Size

Spacing

Color Property

Sets the color of a component. Uses predefined theme colors or accepts custom values in hex, rgb, or raw rgb formats.
Primary
import { Badge } from "@locus-ui/components";
<Badge color="primary" variant="solid">  Primary</Badge>

View Source

Examples

Theme Colors

The color prop accepts semantic theme values: primary, secondary, tertiary, success, warning, danger, and info.
primary
secondary
tertiary
success
warning
danger
info

theme-colors.tsx

import { Badge } from "@locus-ui/components";
const themeColors = [  "primary", "secondary", "tertiary",  "success", "warning", "danger", "info",];
return themeColors.map((color) => (  <Badge key={color} color={color} variant="solid">    {color}  </Badge>));

Palette Colors

Additional named palette colors are available: red, orange, yellow, green, blue, purple, gray, maroon, cyan, navy, teal, lime, magenta, and white.
red
orange
yellow
green
blue
purple
gray
maroon
cyan
navy
teal
lime
magenta
white

palette-colors.tsx

import { Badge } from "@locus-ui/components";
const paletteColors = [  "red", "orange", "yellow", "green", "blue",  "purple", "gray", "maroon", "cyan", "navy",  "teal", "lime", "magenta", "white",];
return paletteColors.map((color) => (  <Badge key={color} color={color} variant="solid">    {color}  </Badge>

Custom Colors

The color prop also accepts custom values in hex, rgb(), or raw RGB formats.
Hex
RGB
Raw RGB

custom-colors.tsx

import { Badge } from "@locus-ui/components";
<Badge color="#7BEB34" variant="solid">Hex</Badge><Badge color="rgb(125, 235, 52)" variant="solid">RGB</Badge><Badge color="125, 235, 52" variant="solid">Raw RGB</Badge>