PixelLabel
experimentalLa API puede cambiar sin una versión mayor. Desde la versión 0.1.0.
Etiqueta HUD en Silkscreen: corta, en mayúsculas y nunca bajo 11 px.
import { PixelLabel } from '@pipepath/brand-ui';Ejemplos
tema oscuro
en línea · santiago · 18 mserror 40412 jugadores
arcade claro
en línea · santiago · 18 mserror 40412 jugadores
Props
| Prop | Tipo | Por defecto | Descripción (en inglés, desde el código) |
|---|---|---|---|
as | 'span' | 'p' | 'div' | 'span' | |
children (obligatoria) | ReactNode | — | A few words from the consumer (status, eyebrow, HUD caption), uppercased by CSS: Silkscreen is never for long text. |
className | string | — | |
ref | Ref<HTMLElement> | — |
Cuándo usarlo
- Para etiquetas cortas: estados, eyebrows sobre un título y leyendas de HUD. El CSS las pasa a mayúsculas.
- Traduce el texto en cada idioma: EN LÍNEA, ONLINE, ONLINE.
- Junto al color de un estado, siempre: el color nunca va solo.
Cuándo no usarlo
- Para párrafos, botones o cualquier texto largo: Silkscreen cansa y los lectores de pantalla no lo necesitan así.
- Con códigos de región para personas: escribe «santiago», no «scl».