Skip to main content

Interactive List

The InteractiveList and InteractiveListItem components are used for actionable list items.

Polymorphic Component

By default, content is rendered inside a <div>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples​

Basic Interactive List​

Shipping address

1234 Main St, San Francisco, CA 94111

import { InteractiveList } from '@curology/ui-components-web/react/InteractiveList';
import { InteractiveListItem } from '@curology/ui-components-web/react/InteractiveList/InteractiveListItem';

<InteractiveList>
  <InteractiveListItem onClick={() => alert('Clicked!')} title="Payment method">
    🍎 ApplePay™
  </InteractiveListItem>
  <InteractiveListItem href="#test" title="Shipping address">
    1234 Main St, San Francisco, CA 94111
  </InteractiveListItem>
</InteractiveList>

Props​

InteractiveListItemProps

NameTypeDefault ValueRequiredDescription
All attributes of <button />, or <a />
titleReactNodeYesThe title of the list item.