Sentiment

The Sentiment component is a visual indication of a user's emotion or feeling towards something. The Sentiment variant can be positive, negative, or neutral.

For more information on how to use the features and props for this component, check out the developer documentation.

The Sentiment component displays a colored Icon and a label for each of the three variants. The label can be hidden to only show the Icon by passing labelHidden to the component. You should always pass an aria-label to describe the Sentiment component for accessibility purposes, even if the label is not hidden.

You can use custom icons and labels for each of the three variants by passing objects to the labels and icons props with key-value pairs for each sentiment. The icon names supported are any default Cosmos Icon, or any custom icon that has been properly registered. For more information on registering custom icons, visit the Icon documentation.

NameTypeDefaultDescription
variant*
'positive' |'neutral' |'negative' 
Variant of the sentiment
aria-labelstringAria label for screen readers.
classNamestringAdditional CSS classes.
iconsIcons for different sentiment variants. If not supplied default icons will be shown
labelHiddenbooleanfalse Flag that indicates if label needs to be hidden
labelsLabels for different sentiment variants. If not supplied default labels will be shown
refRef<HTMLDivElement>Ref to the element

You can override the styles of the Sentiment component by setting a custom theme on the Configuration component.

{
        •         color: 'base.palette.success' // → base.palette.success
        •       },
        •         color: 'base.palette.urgent' // → base.palette.urgent
        •       },
        •         color: 'base.palette.foreground-color' // → base.palette.foreground-color
        •       }
      •     }
    •   }
}