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.

Usage

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.

Related components

• Icon
• Text

Properties

Custom theming

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

Theme properties

{
  components: {
    sentiment: {
      positive: {
        color: 'base.palette.success' // → base.palette.success
      },
      negative: {
        color: 'base.palette.urgent' // → base.palette.urgent
      },
      neutral: {
        color: 'base.palette.foreground-color' // → base.palette.foreground-color
      }
    }
  }
}