Skip to main content

List

Storybook

To implement List component into your project you'll need to add the import:

import { List } from "@shoptet/ui";

After adding import into your project you can use it simply like:

<List dividers icon={{ icon: "shp-checkmark", variant: "secondary" }}>
  <List.Item label="Item 1" value="Icon and its color is passed via context" />
  <List.Item label="Item 2" value="Icon and its color is passed via context" />
  <List.Item label="Item 3" value="Icon and its color is passed via context" />
  <List.Item
    icon={{ icon: "shp-heart", variant: "primary" }}
    label="Item 4"
    value="Heart icon, primary variant is defined by the item "
  />
  <List.Item
    icon={{ icon: "shp-alert", variant: "secondary" }}
    label="Item 5"
    value="Alert icon, secondary variant is defined by the item"
  />
  <List.Item icon={true} label="Item 6" ellipsis={false}>
    <strong>
      Overridden by the item: icon placeholder padding,{" "}
      <a href="#">link is defined</a> as children, ellipsis is disabled
    </strong>
  </List.Item>
  <List.Item
    icon={false}
    label="Item 6"
    value="No icon and no padding but with an action"
    action={{
      href: "#",
      onClick: (event) => {
        event.preventDefault();
        alert("Action clicked");
      },
      value: "Action",
    }}
  />
</List>