Components
Structure
Item

Item

Item

Expand code

Editable Example

import { Item } from "@wfp/react";

() => {
  return (
    <Item
      kind="sidebar"
      subtitle="Your subtitle"
      title="Confirmation of additional lorem ipsum"
    >
      We would like to inform you that your order has
      been shipped. You can track your order with the
      following tracking number: 1234567890
    </Item>
  );
};
PropDefaultDescriptionValue

title

ReactNode
–

Provide the title for the item contet

image

ReactNode
–

Provide an image to the item

children

ReactNode
–

Provide the description for the item content

icon

ReactNode |IIcon
–

Provide the icon for the item content

kind

"undefined" |"horizontal" |"large"
–

Provide a kind to use different appearances.

wrapper

"undefined" |"sidebar" |"repeater"
–

Provide a wrap to use different borders.

showAdditionalIcon

boolean
–

Show an additional chevron icon on the right side

subContent

ReactNode
–

Additional content shown underneath the regular content (children)

hint

ReactNode
–

Provide a hint to the item shown on the right bottom corner

active

boolean
–

Enable the active state to the item

additional

ReactNode
–

Provide additional info on the top right corner of the item

noImage

boolean
–

Disable the image to the item

unread

boolean
–

Enable an unread state to the item

On this page

References