Button

source path: '@phpcreation/frontend-components-react'

Variants

Primary

<Button variant="primary" size="large" title="Test" />

Secondary

<Button variant="secondary" size="large" title="Test" />

Neutral

<Button variant="neutral" size="large" title="Test" />

Sizes

Primary

<Button  variant="primary" size="xlarge" title="Test" />
<Button  variant="primary" size="large" title="Test" />
<Button  variant="primary" size="medium" title="Test" />
<Button  variant="primary" size="small" title="Test" />
<Button  variant="primary" size="xsmall" title="Test" />

Secondary

<Button  variant="secondary" size="xlarge" title="Test" />
<Button  variant="secondary" size="large" title="Test" />
<Button  variant="secondary" size="medium" title="Test" />
<Button  variant="secondary" size="small" title="Test" />
<Button  variant="secondary" size="xsmall" title="Test" />

Neutral

<Button  variant="neutral" size="xlarge" title="Test" />
<Button  variant="neutral" size="large" title="Test" />
<Button  variant="neutral" size="medium" title="Test" />
<Button  variant="neutral" size="small" title="Test" />
<Button  variant="neutral" size="xsmall" title="Test" />

With an icon

<Button
  variant="neutral"
  size="large"
  title="Test"
  icon={
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="h-5 w-5"
      viewBox="0 0 20 20"
      fill="currentColor"
    >
      <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
      <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
    </svg>
  }
/>

Loading

<Button
  isLoading={true}
  labelLoading="Submiting..."
  variant="primary"
  size="medium"
  title="Test"
/>

Automated tests

Unit

Command : npm run test:unit
Test file location : /tests/button.unit.test.tsx

npm run test:unit:file button

Integration

Command : ???
Test file location : ???

???

Embadded Content Dropdown Ghost