Pular para o conteúdo
Ajude a traduzir esta página

Chip API

Documentação da API para o componente React Chip . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import Chip from '@mui/material/Chip';
// ou
import { Chip } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Chips represent complex entities in small blocks, such as a contact.

Nome do componente

The name MuiChip can be used when providing default props or style overrides in the theme.

Propriedades

Props of the nativo component are also available.

NomeTipoPadrãoDescrição
avatarelement
The Avatar for the Card Header.
childrenunsupportedProp
This prop isn't supported. Use the component prop if you need to change the children structure.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
clickableboolfalse
If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.
color'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'default'
A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
deleteIconelement
Override the default delete icon element. Shown only if onDelete is set.
disabledboolfalse
Se true, o componente está desabilitado.
iconelement
Icon element.
labelnode
O conteúdo do componente.
onDeletefunc
Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
size'medium'
| 'small'
| string		'medium'
The size of the autocomplete.
sxfunc
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant'filled'
| 'outlined'
| string		'filled'
A variante a usar.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiChip-rootEstilos aplicados ao elemento raiz.
sizeSmall.MuiChip-sizeSmallEstilos aplicados para o elemento raiz se size="small".
sizeMedium.MuiChip-sizeMediumEstilos aplicados para o elemento raiz se size="medium".
colorPrimary.MuiChip-colorPrimaryEstilos aplicados para o elemento raiz se color="primary".
colorSecondary.MuiChip-colorSecondaryEstilos aplicados para o elemento raiz se color="secondary".
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true}.
clickable.MuiChip-clickableEstilos aplicados para o elemento raiz se onClick is defined or clickable={true}.
clickableColorPrimary.MuiChip-clickableColorPrimaryEstilos aplicados para o elemento raiz se onClick and color="primary" is defined or clickable={true}.
clickableColorSecondary.MuiChip-clickableColorSecondaryEstilos aplicados para o elemento raiz se onClick and color="secondary" is defined or clickable={true}.
deletable.MuiChip-deletableEstilos aplicados para o elemento raiz se onDelete is defined.
deletableColorPrimary.MuiChip-deletableColorPrimaryEstilos aplicados para o elemento raiz se onDelete and color="primary" is defined.
deletableColorSecondary.MuiChip-deletableColorSecondaryEstilos aplicados para o elemento raiz se onDelete and color="secondary" is defined.
outlined.MuiChip-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
filled.MuiChip-filledEstilos aplicados para o elemento raiz se variant="filled".
outlinedPrimary.MuiChip-outlinedPrimaryEstilos aplicados para o elemento raiz se variant="outlined" and color="primary".
outlinedSecondary.MuiChip-outlinedSecondaryEstilos aplicados para o elemento raiz se variant="outlined" and color="secondary".
avatar.MuiChip-avatarEstilos aplicados a the avatar element.
avatarSmall.MuiChip-avatarSmallEstilos aplicados para the avatar element se size="small".
avatarMedium.MuiChip-avatarMediumEstilos aplicados para the avatar element se size="medium".
avatarColorPrimary.MuiChip-avatarColorPrimaryEstilos aplicados para the avatar element se color="primary".
avatarColorSecondary.MuiChip-avatarColorSecondaryEstilos aplicados para the avatar element se color="secondary".
icon.MuiChip-iconEstilos aplicados a the icon element.
iconSmall.MuiChip-iconSmallEstilos aplicados para the icon element se size="small".
iconMedium.MuiChip-iconMediumEstilos aplicados para the icon element se size="medium".
iconColorPrimary.MuiChip-iconColorPrimaryEstilos aplicados para the icon element se color="primary".
iconColorSecondary.MuiChip-iconColorSecondaryEstilos aplicados para the icon element se color="secondary".
label.MuiChip-labelEstilos aplicados a the label `span` element.
labelSmall.MuiChip-labelSmallEstilos aplicados para the label `span` element se size="small".
labelMedium.MuiChip-labelMediumEstilos aplicados para the label `span` element se size="medium".
deleteIcon.MuiChip-deleteIconEstilos aplicados a the deleteIcon element.
deleteIconSmall.MuiChip-deleteIconSmallEstilos aplicados para the deleteIcon element se size="small".
deleteIconMedium.MuiChip-deleteIconMediumEstilos aplicados para the deleteIcon element se size="medium".
deleteIconColorPrimary.MuiChip-deleteIconColorPrimaryEstilos aplicados para the deleteIcon element se color="primary" and variant="filled".
deleteIconColorSecondary.MuiChip-deleteIconColorSecondaryEstilos aplicados para the deleteIcon element se color="secondary" and variant="filled".
deleteIconOutlinedColorPrimary.MuiChip-deleteIconOutlinedColorPrimaryEstilos aplicados para the deleteIcon element se color="primary" and variant="outlined".
deleteIconOutlinedColorSecondary.MuiChip-deleteIconOutlinedColorSecondaryEstilos aplicados para the deleteIcon element se color="secondary" and variant="outlined".
focusVisible.Mui-focusVisiblePseudo-class aplicada a o elemento raiz se teclado focado.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações