@syncfusion/react-buttons/styles/chips/material.css

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

.sf-chip-list {
  display: flex;
  padding: var(--sf-spacing-0);
}
.sf-chip-list:not(.sf-chip) {
  flex-wrap: wrap;
}
.sf-chip {
  border: 1px solid;
  border-radius: var(--sf-radius-16);
  font-size: var(--sf-font-size-sm);
  font-weight: var(--sf-font-weight-medium);
  margin: var(--sf-spacing-4);
  align-items: center;
  justify-content: center;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  line-height: var(--sf-line-height-sm);
  outline: none;
  overflow: hidden;
  padding: var(--sf-spacing-5) var(--sf-spacing-10);
  position: relative;
  user-select: none;
}
.sf-chip.sf-chip-has-icon {
  padding-block: var(--sf-spacing-3);
}
.sf-chip-avatar,
.sf-chip-icon,
.sf-chip-image {
  height: var(--sf-spacing-24);
  width: var(--sf-spacing-24);
}
.sf-chip-avatar {
  border-radius: var(--sf-radius-12);
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
  font-size: var(--sf-font-size-sm);
}
.sf-chip-icon {
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
}
.sf-chip-delete {
  border-radius: var(--sf-radius-full);
  margin-inline: var(--sf-spacing-8) calc(var(--sf-spacing) * -0.125);
  font-size: var(--sf-font-size-base);
}
.sf-chip-image {
  border-radius: var(--sf-radius-full);
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
}
.sf-chip-trailing-url {
  height: var(--sf-spacing-22);
  width: var(--sf-spacing-22);
  border-radius: var(--sf-radius-full);
  margin-inline: var(--sf-spacing-8) calc(var(--sf-spacing) * -0.375);
}
.sf-chip-leading-image,
.sf-chip-trailing-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sf-chip-delete svg,
.sf-chip-selectable-icon svg {
  font-size: var(--sf-font-size-base);
}
.sf-chip-multi-selection .sf-active .sf-chip-icon,
.sf-chip-multi-selection .sf-active .sf-chip-avatar,
.sf-chip-icon-wrap .sf-chip-selectable-icon,
.sf-chip-avatar-wrap .sf-chip-selectable-icon {
  display: none;
}
.sf-chip .sf-chip-selectable-icon {
  height: var(--sf-spacing-24);
  overflow: hidden;
  transition: width 300ms, margin 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 0;
}
.sf-chip.sf-active .sf-chip-selectable-icon {
  margin-inline: calc(var(--sf-spacing) * -0.375) var(--sf-spacing-4);
  display: flex;
  width: var(--sf-spacing-24);
}
.sf-chip-avatar {
  background-color: rgb(var(--sf-color-primary-container));
}
.sf-chip.sf-disabled {
  opacity: 1;
}
.sf-chip.sf-outline {
  border-width: 1px;
}
.sf-chip-selection .sf-chip.sf-active, .sf-chip-selection .sf-chip.sf-active.sf-focused {
  background-color: rgba(var(--sf-color-on-surface), 0.08);
}
.sf-chip {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1));
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-focused {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-focused.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip:active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-primary {
  color: rgb(var(--sf-color-on-primary));
}
.sf-chip.sf-primary .sf-chip-avatar {
  background-color: rgb(var(--sf-color-primary));
}
.sf-chip.sf-primary {
  background: rgb(var(--sf-color-primary));
}
.sf-chip.sf-primary:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.08), rgba(var(--sf-color-on-primary), 0.08)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-primary.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.08), rgba(var(--sf-color-on-primary), 0.08)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-primary.sf-focused.sf-active, .sf-chip.sf-primary.sf-active, .sf-chip.sf-primary:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-primary), 0.12), rgba(var(--sf-color-on-primary), 0.12)), rgba(var(--sf-color-primary));
}
.sf-chip.sf-success {
  color: rgb(var(--sf-color-success-text));
}
.sf-chip.sf-success .sf-chip-avatar {
  background-color: rgb(var(--sf-color-success));
}
.sf-chip.sf-success {
  background: rgb(var(--sf-color-success));
}
.sf-chip.sf-success:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.08), rgba(var(--sf-color-success-text), 0.08)), rgba(var(--sf-color-success));
}
.sf-chip.sf-success.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.08), rgba(var(--sf-color-success-text), 0.08)), rgba(var(--sf-color-success));
}
.sf-chip.sf-success.sf-focused.sf-active, .sf-chip.sf-success.sf-active, .sf-chip.sf-success:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-success-text), 0.12), rgba(var(--sf-color-success-text), 0.12)), rgba(var(--sf-color-success));
}
.sf-chip.sf-info {
  color: rgb(var(--sf-color-info-text));
}
.sf-chip.sf-info .sf-chip-avatar {
  background-color: rgb(var(--sf-color-info));
}
.sf-chip.sf-info {
  background: rgb(var(--sf-color-info));
}
.sf-chip.sf-info:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.08), rgba(var(--sf-color-info-text), 0.08)), rgba(var(--sf-color-info));
}
.sf-chip.sf-info.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.08), rgba(var(--sf-color-info-text), 0.08)), rgba(var(--sf-color-info));
}
.sf-chip.sf-info.sf-focused.sf-active, .sf-chip.sf-info.sf-active, .sf-chip.sf-info:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-info-text), 0.12), rgba(var(--sf-color-info-text), 0.12)), rgba(var(--sf-color-info));
}
.sf-chip.sf-warning {
  color: rgb(var(--sf-color-warning-text));
}
.sf-chip.sf-warning .sf-chip-avatar {
  background-color: rgb(var(--sf-color-warning));
}
.sf-chip.sf-warning {
  background: rgb(var(--sf-color-warning));
}
.sf-chip.sf-warning:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.08), rgba(var(--sf-color-warning-text), 0.08)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-warning.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.08), rgba(var(--sf-color-warning-text), 0.08)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-warning.sf-focused.sf-active, .sf-chip.sf-warning.sf-active, .sf-chip.sf-warning:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-warning-text), 0.12), rgba(var(--sf-color-warning-text), 0.12)), rgba(var(--sf-color-warning));
}
.sf-chip.sf-error {
  color: rgb(var(--sf-color-error-text));
}
.sf-chip.sf-error .sf-chip-avatar {
  background-color: rgb(var(--sf-color-error));
}
.sf-chip.sf-error {
  background: rgb(var(--sf-color-error));
}
.sf-chip.sf-error:hover {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.08), rgba(var(--sf-color-error-text), 0.08)), rgba(var(--sf-color-error));
}
.sf-chip.sf-error.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.08), rgba(var(--sf-color-error-text), 0.08)), rgba(var(--sf-color-error));
}
.sf-chip.sf-error.sf-focused.sf-active, .sf-chip.sf-error.sf-active, .sf-chip.sf-error:active {
  background: linear-gradient(0deg, rgba(var(--sf-color-error-text), 0.12), rgba(var(--sf-color-error-text), 0.12)), rgba(var(--sf-color-error));
}
.sf-chip.sf-outline {
  background: transparent;
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-outline:hover {
  background: rgba(var(--sf-color-on-surface), 0.05);
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-focused {
  background: linear-gradient(0deg, rgba(var(--sf-color-surface), 1), rgba(var(--sf-color-surface), 1)), rgba(var(--sf-color-surface));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-focused.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline.sf-active {
  background: linear-gradient(0deg, rgba(var(--sf-color-on-surface), 0.12), rgba(var(--sf-color-on-surface), 0.12));
  color: rgb(var(--sf-color-on-surface));
}
.sf-chip.sf-outline:active {
  background: rgba(var(--sf-color-on-surface), 0.08);
  color: rgb(var(--sf-color-on-surface-variant));
}
.sf-chip.sf-outline.sf-primary {
  color: rgb(var(--sf-color-primary));
}
.sf-chip.sf-outline.sf-primary .sf-chip-avatar {
  color: rgb(var(--sf-color-on-primary));
}
.sf-chip.sf-outline.sf-primary {
  background: transparent;
}
.sf-chip.sf-outline.sf-primary:hover {
  background: rgb(var(--sf-color-primary), 0.08);
}
.sf-chip.sf-outline.sf-primary.sf-focused {
  background: rgb(var(--sf-color-primary), 0.12);
}
.sf-chip.sf-outline.sf-primary.sf-focused.sf-active, .sf-chip.sf-outline.sf-primary.sf-active, .sf-chip.sf-outline.sf-primary:active {
  background: rgb(var(--sf-color-primary), 0.16);
}
.sf-chip.sf-outline.sf-success {
  color: rgb(var(--sf-color-success));
}
.sf-chip.sf-outline.sf-success .sf-chip-avatar {
  color: rgb(var(--sf-color-success-text));
}
.sf-chip.sf-outline.sf-success {
  background: transparent;
}
.sf-chip.sf-outline.sf-success:hover {
  background: rgb(var(--sf-color-success), 0.08);
}
.sf-chip.sf-outline.sf-success.sf-focused {
  background: rgb(var(--sf-color-success), 0.12);
}
.sf-chip.sf-outline.sf-success.sf-focused.sf-active, .sf-chip.sf-outline.sf-success.sf-active, .sf-chip.sf-outline.sf-success:active {
  background: rgb(var(--sf-color-success), 0.16);
}
.sf-chip.sf-outline.sf-info {
  color: rgb(var(--sf-color-info));
}
.sf-chip.sf-outline.sf-info .sf-chip-avatar {
  color: rgb(var(--sf-color-info-text));
}
.sf-chip.sf-outline.sf-info {
  background: transparent;
}
.sf-chip.sf-outline.sf-info:hover {
  background: rgb(var(--sf-color-info), 0.08);
}
.sf-chip.sf-outline.sf-info.sf-focused {
  background: rgb(var(--sf-color-info), 0.12);
}
.sf-chip.sf-outline.sf-info.sf-focused.sf-active, .sf-chip.sf-outline.sf-info.sf-active, .sf-chip.sf-outline.sf-info:active {
  background: rgb(var(--sf-color-info), 0.16);
}
.sf-chip.sf-outline.sf-warning {
  color: rgb(var(--sf-color-warning));
}
.sf-chip.sf-outline.sf-warning .sf-chip-avatar {
  color: rgb(var(--sf-color-warning-text));
}
.sf-chip.sf-outline.sf-warning {
  background: transparent;
}
.sf-chip.sf-outline.sf-warning:hover {
  background: rgb(var(--sf-color-warning), 0.08);
}
.sf-chip.sf-outline.sf-warning.sf-focused {
  background: rgb(var(--sf-color-warning), 0.12);
}
.sf-chip.sf-outline.sf-warning.sf-focused.sf-active, .sf-chip.sf-outline.sf-warning.sf-active, .sf-chip.sf-outline.sf-warning:active {
  background: rgb(var(--sf-color-warning), 0.16);
}
.sf-chip.sf-outline.sf-error {
  color: rgb(var(--sf-color-error));
}
.sf-chip.sf-outline.sf-error .sf-chip-avatar {
  color: rgb(var(--sf-color-error-text));
}
.sf-chip.sf-outline.sf-error {
  background: transparent;
}
.sf-chip.sf-outline.sf-error:hover {
  background: rgb(var(--sf-color-error), 0.08);
}
.sf-chip.sf-outline.sf-error.sf-focused {
  background: rgb(var(--sf-color-error), 0.12);
}
.sf-chip.sf-outline.sf-error.sf-focused.sf-active, .sf-chip.sf-outline.sf-error.sf-active, .sf-chip.sf-outline.sf-error:active {
  background: rgb(var(--sf-color-error), 0.16);
}
.sf-chip.sf-disabled {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-disabled .sf-chip-avatar {
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-outline.sf-disabled {
  color: rgba(var(--sf-color-on-surface), 0.38);
  background: transparent;
}
.sf-chip.sf-outline.sf-disabled .sf-chip-avatar {
  background-color: rgba(var(--sf-color-secondary), 0.12);
  color: rgba(var(--sf-color-on-surface), 0.38);
}
.sf-chip.sf-chip-variant-disabled {
  background: rgba(var(--sf-color-secondary), 0.12);
}
.sf-chip.sf-chip-variant-disabled .sf-chip-avatar {
  background-color: rgba(var(--sf-color-secondary), 0.12);
}