The <LabelStack /> component allow you to add a label list with embeded look and feel, with interactions, buttons for filtering or removing.

Please use the <LabelStack /> component even if you have one and only label to display.


  • labels: [required] the label list, { name: label.Name, color: label.Color, title: label.Name, onClick: handleClick(label), onDelete: handleDelete(label.ID)}.
  • showDelete: [optional] display the remove button
  • isStacked: [optional] stack the label list
  • maxNumber: [optional] limit the number of labels displayed, and add a +N at the end if the list count is higher
  • className: [optional] add some classes to the default class list container


  • .mw100: on main container, will remove the maximum width set to 10em on each item.


Example Code

<LabelStack labels={labelList} />

<LabelStack labels={labelList} showDelete={true} />

<LabelStack labels={labelList} isStacked={true} />
  • +3

<LabelStack labels={labelList} isStacked={true} maxNumber={5} />
  • +5

<LabelStack labels={labelList} isStacked={true} showDelete={true} maxNumber={3} />