ArticleItem

One catalog entry of the Article panel's body: an icon, a label and an optional badge. The Article page describes it in full.

Props

Property	Type	Description
icon	stringundefined	Catalog item icon.
text	string	Required. Catalog item text.
showText	booleanundefined	Sets the catalog item to display text.
onClick	((e: MouseEvent<Element, MouseEvent>, id?: string | undefined) => void) | undefined	Invokes a function upon clicking on a catalog item.
onDrop	((id?: string | undefined, text?: string | undefined, item?: ArticleItemType | undefined) => void) | undefined	Invokes a function upon dragging and dropping a catalog item.
showInitial	booleanundefined	Tells when the catalog item should display initial on icon, text should be hidden.
isEndOfBlock	booleanundefined	Sets the catalog item as end of block.
isActive	booleanundefined	Sets catalog item active.
isDragging	booleanundefined	Sets the catalog item available for dragndrop.
isDragActive	booleanundefined	Sets the catalog item active for dragndrop.
showBadge	booleanundefined	Sets the catalog item to display badge.
labelBadge	stringnumberundefined	Label in catalog item badge.
iconBadge	stringundefined	Sets custom badge icon.
onClickBadge	((id?: string | undefined) => void) | undefined	Invokes a function upon clicking on the catalog item badge.
isHeader	booleanundefined	Sets the catalog item to be displayed as a header.
folderId	stringundefined	Accepts folder id.
badgeTitle	stringundefined	Title for the badge tooltip.
badgeComponent	ReactNode	Custom badge component.
title	stringundefined	Title for the item tooltip.
linkData	TArticleLinkData	Required. Link data for routing.
item	ArticleItemTypeundefined	Item data.
iconNode	ReactNode	Catalog item icon for SSR.
withAnimation	booleanundefined
dataTooltipId	stringundefined
isDisabled	booleanundefined

Stories

Default

Icon Only

With Badge

With Custom Badge

Active

Dragging

Drag Target

Header

End Of Block

Css Customization

The row's variables set on one wrapper -- they are listed under CSS variables on the Article page.