1.0.1 • Published 3 months ago

@cypress-design/react-button v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
3 months ago

Button

Install

npm install @cypress-design/react-button

or with yarn

yarn add @cypress-design/react-button

Usage

import Button from '@cypress-design/react-button'
import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <Button>
    <IconActionPower className="mr-2" />
    Button
  </Button>
)

Square buttons

import { IconActionPower } from '@cypress-design/react-icon'
import Button from '@cypress-design/react-button'
export default () => (
  <div className="flex gap-4 items-center">
    {[20, 24, 32, 40, 48].map((size) => (
      <Button key={size} size={size} square>
        <IconActionPower
          style={{ width: `${size / 2}px`, height: `${size / 2}px` }}
        />
      </Button>
    ))}
  </div>
)

Possible variants

import {
  default as Button,
  VariantClassesTable,
  SizeClassesTable,
} from '@cypress-design/react-button'

export default () => {
  return (
    <div className="flex flex-wrap justify-stretch gap-[8px]">
      {Object.keys(VariantClassesTable).map((variant) => (
        <div
          key={variant}
          className="px-[8px] py-[12px] flex flex-col items-center gap-[16px] rounded min-w-[180px]"
          style={{
            backgroundColor: variant === 'outline-dark' ? '#1a202c' : 'white',
            color: variant === 'outline-dark' ? 'white' : 'black',
          }}
        >
          {variant}
          {Object.keys(SizeClassesTable).map((size) => (
            <div key={size} className="flex gap-[8px] items-center">
              {size}
              <Button variant={variant} size={size}>
                Button
              </Button>
            </div>
          ))}
        </div>
      ))}
    </div>
  )
}
2.0.0-next.0

3 months ago

1.0.1

6 months ago

1.0.0

6 months ago

0.12.9

7 months ago

0.12.8

8 months ago

0.12.7

8 months ago

0.12.6

8 months ago

0.12.5

9 months ago

0.12.4

11 months ago

0.12.1

11 months ago

0.12.2

11 months ago

0.12.3

11 months ago

0.12.0

12 months ago

0.11.2

1 year ago

0.10.0

2 years ago

0.11.0

2 years ago

0.10.1

2 years ago

0.11.1

2 years ago

0.10.2

2 years ago

0.10.3

2 years ago

0.9.0

2 years ago

0.8.1

2 years ago

0.9.1

2 years ago

0.8.2

2 years ago

0.8.0

2 years ago

0.7.0

2 years ago

0.6.0

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.1

2 years ago

0.2.0

3 years ago

0.1.0

3 years ago