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`	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`	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

End Of Block

Css Customization

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

Props​

Stories​

Default​

Icon Only​

With Badge​

With Custom Badge​

Active​

Dragging​

Drag Target​

Header​

End Of Block​

Css Customization​