Resumen
UsaChip para referencias compactas a personas, registros o archivos. Usa Tag para categorías de colores y Status para estados de flujo de trabajo.
”Uso”
startElement y endElement aceptan avatares, iconos u otro contenido. endElementDivider añade un separador antes del contenido final. El chip predeterminado es un div; sus ranuras pueden contener una acción independiente mientras el propio chip sigue siendo de presentación.
Chip nunca inserta una etiqueta. Proporciona una alternativa traducida desde tu aplicación cuando sea necesario. Omite los elementos secundarios para el contenido compuesto íntegramente por ranuras. Un chip interactivo con solo un icono necesita un nombre accesible proporcionado por quien lo llama.
Apariencia
size acepta sm o md, con alturas totales de 20px y 24px. variant acepta ghost, soft, solid, plain u outline; ghost es el valor predeterminado. Los chips simples no tienen relleno en reposo ni relleno inicial. Los chips de contorno tienen un borde marcado de 1px, un relleno en reposo más claro y un relleno interno horizontal de 8px a cada lado, con la misma altura total que las demás variantes. Los chips simples y de contorno en los que se puede hacer clic usan los fondos de ghost al pasar el cursor y al presionar, el cursor de puntero y el anillo de enfoque. Usa shape="round" para una píldora, weight="medium" para dar énfasis y color="secondary" para texto secundario.
Botones y enlaces
onClick mantiene el div predeterminado. Usa render para componer un botón nativo explícito, un ancla, un enlace de enrutador u otro propietario adecuado. Los atributos nativos, controladores, estilos y la referencia raíz llegan a ese propietario. Un botón nativo proporciona activación mediante teclado y comportamiento deshabilitado. Chip reconoce el estado nativo deshabilitado y aria-disabled para la apariencia; aria-disabled por sí solo no impide la activación.
clickable controla la apariencia al pasar el cursor y del puntero, y su valor predeterminado depende de si se proporciona onClick. Establécelo explícitamente para un enlace sin un controlador de clic. No anides botones ni enlaces dentro de un chip que sea interactivo.
Truncamiento y descripciones emergentes
maxWidth limita el ancho del chip renderizado en píxeles, incluido el relleno y cualquier borde de contorno. El mismo límite se aplica a los chips simples con relleno asimétrico. El contenido se trunca con puntos suspensivos de forma predeterminada; truncate={false} lo deja sin restricciones de truncamiento. Los elementos secundarios de tipo cadena proporcionan su propio texto de descripción emergente. Establece tooltipContent para texto personalizado o contenido de nodo, tooltipDelay para el retraso de apertura y isTooltipMultiline para conservar los saltos de línea. alwaysShowTooltip también habilita la descripción emergente cuando el contenido cabe. Estas opciones siguen OverflowingTextWithTooltip. Mantén la información esencial disponible sin depender de pasar el cursor.
Migración
ReemplazaemptyLabel por elementos secundarios alternativos proporcionados por quien llama y reemplaza forceEmptyText o isLabelHidden por elementos secundarios omitidos. Mantén las alternativas de producto traducidas en la aplicación. Reemplaza tooltipLabel por tooltipContent. Mueve disabled al propietario interactivo explícito y elimina nativeButton. Agrega un botón o enlace nativo mediante render dondequiera que el chip se basara anteriormente en onClick para elegir su elemento.
Reemplace las anulaciones de relleno inicial por variant="plain". Mantenga clickable habilitado para enlaces y botones nativos que necesiten respuesta visual al pasar el cursor y al presionar.
”Props”
Los tipos y valores predeterminados se generan a partir de los tipos de componentes públicos. También se aceptan atributos nativos y controladores de eventos.boolean
predeterminado:"false"
Shows the content tooltip even when the content is not truncated.
ReactNode
Caller-owned content. Missing or empty children add no fallback label.
boolean
predeterminado:"isDefined(onClick)"
Enables hover and pointer styling. Defaults to whether
onClick is supplied; does not change the default div or add keyboard behavior."primary" | "secondary"
predeterminado:"primary"
Primary or secondary text color.
ReactNode
Content after the label. Avoid interactive content when the chip itself is a button or link.
boolean
predeterminado:"false"
Adds a divider before
endElement when that slot has content.boolean
Preserves line breaks in the tooltip text.
number
Maximum rendered chip width in pixels, including its leading and trailing padding and any outline border.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the default div. Compose a native button or link explicitly; that owner supplies disabled and native interaction behavior.
"round" | "square"
predeterminado:"square"
Square or round corners.
"md" | "sm"
predeterminado:"sm"
Visual size of the chip.
ReactNode
Content before the label, such as an avatar or icon.
string
Tooltip text. Defaults to string children. Supply text explicitly for node content.
number
Delay in milliseconds before the tooltip opens.
"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"
Position of the content tooltip.
boolean
predeterminado:"true"
Truncates overflowing content with an ellipsis. Defaults to true.
"ghost" | "outline" | "plain" | "soft" | "solid"
predeterminado:"ghost"
Background and border treatment. Outline has a strong border, lighter resting fill and 8px inline padding. Plain has no resting fill or leading padding. Both use ghost hover and pressed feedback when clickable.
"medium" | "regular"
predeterminado:"regular"
Font weight of the content.