Button

The Button component is a simple button component that can be used to trigger actions.

How to use

1import { Button } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
6      click me
7    </Button>
8  )
9}
1import { Button } from '@devup-ui/react'
2
3function App() {
4  return (
5    <Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
6      click me
7    </Button>
8  )
9}

The Button component defined above will render like this:

1function App() {
2  return (
3    <button className="a b c" onClick="alert('clicked!!')">
4      click me
5    </button>
6  )
7}
1function App() {
2  return (
3    <button className="a b c" onClick="alert('clicked!!')">
4      click me
5    </button>
6  )
7}

1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}
1.a {
2  background: red;
3}
4.b {
5  width: 100px;
6}
7.c {
8  height: 100px;
9}

If you pass a number without a unit to a style property, it will be automatically scaled by 4. This means 1 equals 4px, 2 equals 8px, and so on.

However, the following properties are exceptions and are not multiplied by 4:

• opacity
• flex
• z-index
• line-clamp
• font-weight
• line-height
• scale
• aspect-ratio
• flex-grow
• flex-shrink
• order
• grid-column, grid-column-start, grid-column-end
• grid-row, grid-row-start, grid-row-end
• animation-iteration-count
• tab-size, moz-tab-size, -webkit-line-clamp