ActionCard

Storybook

React

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

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

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

<ActionCard
  buttons={({ primaryButtonProps, secondaryButtonProps }) => (
    <>
      <Button
        {...secondaryButtonProps}
        onClick={() => alert("Secondary button clicked")}
      >
        Secondary
      </Button>
      <Button
        {...primaryButtonProps}
        onClick={() => alert("Primary button clicked")}
      >
        Primary
      </Button>
    </>
  )}
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  responsive
  tags={
    <>
      <Tag level="error">Hello</Tag>
      <Tag level="success">world!</Tag>
    </>
  }
  title={<H2>Action card title</H2>}
>
  <Text>Additional content can be placed here.</Text>
</ActionCard>