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" />

Urgent

<Button variant="urgent" 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" />

Urgent

<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" />

Disabled

<Button size="large" title="Test" disabled={true} />

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"
/>

With a link

<LinkButton
  variant="primary"
  size="large"
  title="Test"
  href="https://dev.react-doc.phpr.link/"
/>

Custom styles

Background color

<Button variant="primary" size="large" title="Test" bgcolor="purple-500" />

Text color

<Button variant="secondary" size="large" title="Test" color="purple-500" />

Border color

<Button
  variant="secondary"
  size="large"
  title="Test"
  bordercolor="green-500"
  borderWidth="2"
/>

Hover background color

<Button variant="neutral" size="large" title="Test" hoverbgcolor="purple-500" />

Hover text color

<Button variant="secondary" size="large" title="Test" hovercolor="sky-500" />

Tailwind colors list

https://tailwindcss.com/docs/customizing-colors (opens in a new tab)

Checkout Tailwind Colors and how can we use it within our components.

Props

Button

Name	Type	Default	Description
variant	string	primary	The variant of the button. Can be primary, secondary, neutral or urgent.
size	string	large	The size of the button. Can be xlarge, large, medium, small or xsmall.
title	string		The title of the button.
disabled	boolean	false	If the button is disabled or not.
icon	node		The icon of the button.
isLoading	boolean	false	If the button is loading or not.
labelLoading	string		The label of the button when it is loading.
href	string		The link of the button.
bgcolor	string	#3549FF	The background color of the button. use red-500 or [#ef4444]
color	string	white	The text color of the button. use red-500 or [#ef4444]
bordercolor	string		The border color of the button. use red-500 or [#ef4444]
borderWidth	string		The border width of the button. use 2 or [2px]
hoverbgcolor	string		The hover background color of the button. use red-500 or [#ef4444]
hovercolor	string		The hover text color of the button. use red-500 or [#ef4444]
hoverborder	string		The hover border color of the button. use red-500 or [#ef4444]

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