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}

With the build plugin configured, the Button component is transformed into a native button. The React event handler remains a function expression, not a string attribute. This is the extracted code and CSS from an isolated run with an empty theme and the default prefix; generated names depend on extraction state and prefix.

1import "@devup-ui/react/devup-ui.css";
2function App() {
3	return <button onClick={() => alert("clicked!!")} className="a b c">
4      click me
5    </button>;
6}
1import "@devup-ui/react/devup-ui.css";
2function App() {
3	return <button onClick={() => alert("clicked!!")} className="a b c">
4      click me
5    </button>;
6}

1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{height:100px}.c{width:100px}
1/*! devup-ui v1.0.82, | Apache License 2.0 | https://devup-ui.com */.a{background:red}.b{height:100px}.c{width:100px}

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
• grid-area
• column-count, columns, orphans, widows, zoom
• border-image, border-image-outset, border-image-slice, border-image-width
• mask-border, mask-border-outset, mask-border-slice, mask-border-width
• initial-letter, max-lines, shape-image-threshold
• fill-opacity, flood-opacity, stop-opacity, stroke-opacity, stroke-width, stroke-dashoffset, stroke-miterlimit