Color
Muestra muestras de color con valores hexadecimales y copia con un clic mediante el componente color, para sistemas de diseño y branding.
Usa el componente Color para mostrar paletas de colores en tu documentación. Muestra los colores en una cuadrícula compacta u organízalos en una tabla con filas etiquetadas.
Muestra colores en una cuadrícula simple con nombres y valores de color.
<Color variant="compact">
<Color.Item name="blue-500" value="#3B82F6" />
<Color.Item name="blue-600" value="#2563EB" />
<Color.Item name="blue-700" value="#1D4ED8" />
<Color.Item name="blue-800" value="#1E40AF" />
</Color>Organiza los colores en filas etiquetadas para la documentación del sistema de diseño.
<Color variant="table">
<Color.Row title="Primario">
<Color.Item name="primary-500" value="#3B82F6" />
<Color.Item name="primary-600" value="#2563EB" />
<Color.Item name="primary-700" value="#1D4ED8" />
</Color.Row>
<Color.Row title="Secundario">
<Color.Item name="secondary-500" value="#8B5CF6" />
<Color.Item name="secondary-600" value="#7C3AED" />
</Color.Row>
</Color>El componente admite todos los formatos de color CSS, incluyendo hex, rgb, rgba, hsl y oklch.
<Color variant="compact">
<Color.Item name="hex" value="#FF5733" />
<Color.Item name="rgb" value="rgb(51, 255, 87)" />
<Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
<Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
<Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>Define distintos colores para los modos claro y oscuro usando un objeto con las propiedades light y dark.
<Color variant="compact">
<Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
<Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
<Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>variantstringrequiredEstilo de presentación de la paleta de colores. Opciones: compact o table.
childrenColor.Item | Color.RowrequiredElementos o filas de color que se mostrarán.
titlestringEtiqueta de la fila de colores.
childrenColor.ItemrequiredElementos de color que se muestran en la fila.
namestringNombre o etiqueta del color.
valuestring | { light: string, dark: string }requiredValor del color en cualquier formato CSS, o un objeto con valores para los modos claro y oscuro.