Labels

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.

Options

• 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

Helpers

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

Examples

<LabelStack labels={labelList} />
				

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

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

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

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