Buttons:

const AddPersonIcon = require('../../visuals/Icon/svg/ic_person_add.svg');
const buttons = [
  {
    title: 'Normal button',
    button: <Button className="AnAdditionalClassName">Label</Button>,
  },
  {
    title: 'Button with left icon',
    button: (
      <Button>
        <ButtonIcon icon={AddPersonIcon} />
        <ButtonLabel>Really long label</ButtonLabel>
      </Button>
    ),
  },
  {
    title: 'Multilabel button',
    button: <MultiLabelButton label="Label" subLabel="Sub Label" />,
  },
  {
    title: 'Button on focus',
    button: <Button focus>Label</Button>,
  },
  {
    title: 'Button on hover',
    button: <Button hover>Label</Button>,
  },
  {
    title: 'Button active',
    button: <Button active>Label</Button>,
  },
  {
    title: 'Button with right icon',
    button: (
      <Button>
        <ButtonLabel>Label</ButtonLabel>
        <ButtonIcon icon={AddPersonIcon} />
      </Button>
    ),
  },
  {
    title: 'Icon button',
    button: <IconButton icon={AddPersonIcon} semantic="Add person" />,
  },
  {
    title: 'Icon button small',
    button: <IconButton icon={AddPersonIcon} semantic="Add person" dimension="small" />,
  },
  {
    title: 'Disabled button',
    button: <Button disabled>Label</Button>,
  },
  {
    title: 'Loading button',
    button: (
      <Button inputButtonClass="loading">
        <ButtonLabel>Label</ButtonLabel>
        <LoadingButton />
      </Button>
    ),
  },
  {
    title: 'Responsive button',
    button: (
      <Button responsive>
        <ButtonLabel>Label</ButtonLabel>
        <ButtonIcon icon={AddPersonIcon} />
      </Button>
    ),
  },
  {
    title: 'Link button',
    button: <Button href="/">Link button</Button>,
  },
  {
    title: 'Compact button',
    button: <Button dimension="compact">Label</Button>,
  },
  {
    title: 'Compact button with right icon',
    button: (
      <Button dimension="compact">
        <ButtonLabel>Label</ButtonLabel>
        <ButtonIcon icon={AddPersonIcon} />
      </Button>
    ),
  },
  {
    title: 'Very compact button',
    button: <Button dimension="very-compact">Label</Button>,
  },
  {
    title: 'Very compact button with right icon',
    button: (
      <Button dimension="very-compact">
        <ButtonLabel>Label</ButtonLabel>
        <ButtonIcon icon={AddPersonIcon} />
      </Button>
    ),
  },
];

// Generate test cases
const ButtonsRow = ({ backgroundColor, variant }) => (
  <tr
    style={{
      backgroundColor: `var(${backgroundColor})`,
    }}
  >
    {buttons.map(({ button, title }, index) => <td key={index}>{React.cloneElement(button, { variant, title })}</td>)}
  </tr>
);
<table>
  <tbody>
    {[
      { backgroundColor: '#fff', variant: 'accent' },
      { backgroundColor: '#fff', variant: 'green' },
      { backgroundColor: '#fff', variant: 'blue' },
      { backgroundColor: '#fff', variant: 'yellow' },
      { backgroundColor: '#fff', variant: 'whiteWithBorder' },
      { backgroundColor: '--color-brand-800', variant: 'white' },
      { backgroundColor: '--color-brand-800', variant: 'linkWhite' },
      { backgroundColor: '#fff', variant: 'linkDark' },
      { backgroundColor: '#fff', variant: 'linkBlue' },
      { backgroundColor: '#fff', variant: 'linkRed' },
      { backgroundColor: '#fff', variant: 'linkBanner' },
    ].map((row, index) => <ButtonsRow backgroundColor={row.backgroundColor} variant={row.variant} key={index} />)}
  </tbody>
</table>;