Button
Button
Button component is used to handle user interactions.
Examples
Variant & Size
Button components has default and primary variants. Size prop determines the paddings of the button.
Show Code
1import { Button } from '@devup-ui/components'
2import { css, Flex } from '@devup-ui/react'
3
4export default function Variants() {
5 return (
6 <>
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ h: 'min-content' })}
10 size="sm"
11 variant="primary"
12 >
13 Primary sm
14 </Button>
15 <Button
16 className={css({ h: 'min-content' })}
17 size="md"
18 variant="primary"
19 >
20 Primary md
21 </Button>
22 <Button
23 className={css({ h: 'min-content' })}
24 size="lg"
25 variant="primary"
26 >
27 Primary lg
28 </Button>
29 </Flex>
30 <Flex flexWrap="wrap" gap="12px" mb="16px">
31 <Button className={css({ h: 'min-content' })} size="sm">
32 Default sm
33 </Button>
34 <Button className={css({ h: 'min-content' })} size="md">
35 Default md
36 </Button>
37 <Button className={css({ h: 'min-content' })} size="lg">
38 Default lg
39 </Button>
40 </Flex>
41 </>
42 )
43}
441import { Button } from '@devup-ui/components'
2import { css, Flex } from '@devup-ui/react'
3
4export default function Variants() {
5 return (
6 <>
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ h: 'min-content' })}
10 size="sm"
11 variant="primary"
12 >
13 Primary sm
14 </Button>
15 <Button
16 className={css({ h: 'min-content' })}
17 size="md"
18 variant="primary"
19 >
20 Primary md
21 </Button>
22 <Button
23 className={css({ h: 'min-content' })}
24 size="lg"
25 variant="primary"
26 >
27 Primary lg
28 </Button>
29 </Flex>
30 <Flex flexWrap="wrap" gap="12px" mb="16px">
31 <Button className={css({ h: 'min-content' })} size="sm">
32 Default sm
33 </Button>
34 <Button className={css({ h: 'min-content' })} size="md">
35 Default md
36 </Button>
37 <Button className={css({ h: 'min-content' })} size="lg">
38 Default lg
39 </Button>
40 </Flex>
41 </>
42 )
43}
44Icon
Pass in an svg icon component into icon prop. If props like stroke and fill have "currentColor" value, the svg icon will follow the text color of the button.
Show Code
1import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4import IconDelete from '../../IconDelete'
5
6export default function Icon() {
7 return (
8 <Box w="100%">
9 <Flex flexWrap="wrap" gap="12px" mb="16px">
10 <Button
11 className={css({ h: 'min-content' })}
12 icon={
13 <svg
14 aria-hidden="true"
15 fill="none"
16 height="24"
17 viewBox="0 0 24 24"
18 width="24"
19 xmlns="http://www.w3.org/2000/svg"
20 >
21 <path
22 clipRule="evenodd"
23 d="M16.2635 4.3205C15.8763 3.90288 15.2518 3.89202 14.8523 4.29596L6.92714 12.3101C6.77288 12.4661 6.66766 12.6701 6.6262 12.8938L6.19139 15.2388C6.04942 16.0044 6.67528 16.6795 7.38514 16.5264L9.56701 16.0557C9.74988 16.0163 9.91913 15.9232 10.0562 15.7868L16.6085 9.26287C16.6164 9.25496 16.6242 9.24687 16.6319 9.23862L18.0101 7.75198C18.4063 7.32464 18.4063 6.63179 18.0101 6.20445L16.2635 4.3205ZM15.1465 6.39842L15.5325 6.00805L16.4319 6.97821L16.058 7.38159L15.1465 6.39842ZM13.9617 7.59651L14.8868 8.59436L9.08091 14.3751L7.96212 14.6164L8.17961 13.4435L13.9617 7.59651ZM5.91304 18.0303C5.40878 18.0303 5 18.4712 5 19.0152C5 19.5591 5.40878 20 5.91304 20H18.087C18.5912 20 19 19.5591 19 19.0152C19 18.4712 18.5912 18.0303 18.087 18.0303H5.91304Z"
24 fill="currentColor"
25 fillRule="evenodd"
26 />
27 </svg>
28 }
29 >
30 With icon
31 </Button>
32
33 <Button
34 className={css({ h: 'min-content' })}
35 icon={
36 <svg
37 aria-hidden="true"
38 fill="none"
39 height="24"
40 viewBox="0 0 25 24"
41 width="25"
42 xmlns="http://www.w3.org/2000/svg"
43 >
44 <path
45 d="M13.3333 7.83333C13.3333 7.3731 12.9602 7 12.5 7C12.0398 7 11.6667 7.3731 11.6667 7.83333V11.1667H8.33333C7.8731 11.1667 7.5 11.5398 7.5 12C7.5 12.4602 7.8731 12.8333 8.33333 12.8333H11.6667V16.1667C11.6667 16.6269 12.0398 17 12.5 17C12.9602 17 13.3333 16.6269 13.3333 16.1667V12.8333H16.6667C17.1269 12.8333 17.5 12.4602 17.5 12C17.5 11.5398 17.1269 11.1667 16.6667 11.1667H13.3333V7.83333Z"
46 fill="currentColor"
47 />
48 </svg>
49 }
50 variant="primary"
51 >
52 Add
53 </Button>
54 <Button
55 className={css({ h: 'min-content' })}
56 danger
57 icon={<IconDelete />}
58 >
59 Delete
60 </Button>
61 </Flex>
62 </Box>
63 )
64}
651import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4import IconDelete from '../../IconDelete'
5
6export default function Icon() {
7 return (
8 <Box w="100%">
9 <Flex flexWrap="wrap" gap="12px" mb="16px">
10 <Button
11 className={css({ h: 'min-content' })}
12 icon={
13 <svg
14 aria-hidden="true"
15 fill="none"
16 height="24"
17 viewBox="0 0 24 24"
18 width="24"
19 xmlns="http://www.w3.org/2000/svg"
20 >
21 <path
22 clipRule="evenodd"
23 d="M16.2635 4.3205C15.8763 3.90288 15.2518 3.89202 14.8523 4.29596L6.92714 12.3101C6.77288 12.4661 6.66766 12.6701 6.6262 12.8938L6.19139 15.2388C6.04942 16.0044 6.67528 16.6795 7.38514 16.5264L9.56701 16.0557C9.74988 16.0163 9.91913 15.9232 10.0562 15.7868L16.6085 9.26287C16.6164 9.25496 16.6242 9.24687 16.6319 9.23862L18.0101 7.75198C18.4063 7.32464 18.4063 6.63179 18.0101 6.20445L16.2635 4.3205ZM15.1465 6.39842L15.5325 6.00805L16.4319 6.97821L16.058 7.38159L15.1465 6.39842ZM13.9617 7.59651L14.8868 8.59436L9.08091 14.3751L7.96212 14.6164L8.17961 13.4435L13.9617 7.59651ZM5.91304 18.0303C5.40878 18.0303 5 18.4712 5 19.0152C5 19.5591 5.40878 20 5.91304 20H18.087C18.5912 20 19 19.5591 19 19.0152C19 18.4712 18.5912 18.0303 18.087 18.0303H5.91304Z"
24 fill="currentColor"
25 fillRule="evenodd"
26 />
27 </svg>
28 }
29 >
30 With icon
31 </Button>
32
33 <Button
34 className={css({ h: 'min-content' })}
35 icon={
36 <svg
37 aria-hidden="true"
38 fill="none"
39 height="24"
40 viewBox="0 0 25 24"
41 width="25"
42 xmlns="http://www.w3.org/2000/svg"
43 >
44 <path
45 d="M13.3333 7.83333C13.3333 7.3731 12.9602 7 12.5 7C12.0398 7 11.6667 7.3731 11.6667 7.83333V11.1667H8.33333C7.8731 11.1667 7.5 11.5398 7.5 12C7.5 12.4602 7.8731 12.8333 8.33333 12.8333H11.6667V16.1667C11.6667 16.6269 12.0398 17 12.5 17C12.9602 17 13.3333 16.6269 13.3333 16.1667V12.8333H16.6667C17.1269 12.8333 17.5 12.4602 17.5 12C17.5 11.5398 17.1269 11.1667 16.6667 11.1667H13.3333V7.83333Z"
46 fill="currentColor"
47 />
48 </svg>
49 }
50 variant="primary"
51 >
52 Add
53 </Button>
54 <Button
55 className={css({ h: 'min-content' })}
56 danger
57 icon={<IconDelete />}
58 >
59 Delete
60 </Button>
61 </Flex>
62 </Box>
63 )
64}
65Danger
Use danger prop to signal caution.
Show Code
1import { Button } from '@devup-ui/components'
2import { Box, css } from '@devup-ui/react'
3
4export default function Danger() {
5 return (
6 <Box w="100%">
7 <Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
8 <Button className={css({ h: 'min-content' })} danger size="sm">
9 Danger sm
10 </Button>
11 <Button className={css({ h: 'min-content' })} danger size="md">
12 Danger md
13 </Button>
14 <Button className={css({ h: 'min-content' })} danger size="lg">
15 Danger lg
16 </Button>
17 </Box>
18 </Box>
19 )
20}
211import { Button } from '@devup-ui/components'
2import { Box, css } from '@devup-ui/react'
3
4export default function Danger() {
5 return (
6 <Box w="100%">
7 <Box display="flex" flexWrap="wrap" gap="12px" marginBottom="16px">
8 <Button className={css({ h: 'min-content' })} danger size="sm">
9 Danger sm
10 </Button>
11 <Button className={css({ h: 'min-content' })} danger size="md">
12 Danger md
13 </Button>
14 <Button className={css({ h: 'min-content' })} danger size="lg">
15 Danger lg
16 </Button>
17 </Box>
18 </Box>
19 )
20}
21Disabled
Use disabled prop to show disabled UI of the button.
Show Code
1import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4export default function Disabled() {
5 return (
6 <Box w="100%">
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ height: 'min-content' })}
10 disabled
11 variant="primary"
12 >
13 Primary disabled
14 </Button>
15 <Button className={css({ height: 'min-content' })} disabled>
16 Default disabled
17 </Button>
18 </Flex>
19 </Box>
20 )
21}
221import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4export default function Disabled() {
5 return (
6 <Box w="100%">
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ height: 'min-content' })}
10 disabled
11 variant="primary"
12 >
13 Primary disabled
14 </Button>
15 <Button className={css({ height: 'min-content' })} disabled>
16 Default disabled
17 </Button>
18 </Flex>
19 </Box>
20 )
21}
22Colors
Pass in an object containing color tokens into colors prop. You can change color of border, background, danger color and more using primary, error, text, and so on.
Show Code
1import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4export default function Colors() {
5 return (
6 <Box w="100%">
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ h: 'min-content' })}
10 colors={{
11 primary: 'orange',
12 text: 'chocolate',
13 }}
14 >
15 Default
16 </Button>
17 <Button
18 className={css({ h: 'min-content' })}
19 colors={{
20 primary: 'orange',
21 text: 'chocolate',
22 }}
23 variant="primary"
24 >
25 Primary
26 </Button>
27 <Button
28 className={css({ h: 'min-content' })}
29 colors={{
30 error: 'orange',
31 text: 'chocolate',
32 }}
33 danger
34 >
35 Danger
36 </Button>
37 </Flex>
38 <Flex flexWrap="wrap" gap="12px" mb="16px">
39 <Button
40 className={css({ h: 'min-content' })}
41 colors={{
42 primary: 'darkgreen',
43 text: 'darkseagreen',
44 }}
45 >
46 Default
47 </Button>
48 <Button
49 className={css({ h: 'min-content' })}
50 colors={{
51 primary: 'darkgreen',
52 text: 'darkseagreen',
53 }}
54 variant="primary"
55 >
56 Primary
57 </Button>
58 <Button
59 className={css({ h: 'min-content' })}
60 colors={{
61 error: 'darkgreen',
62 text: 'darkseagreen',
63 }}
64 danger
65 >
66 Danger
67 </Button>
68 </Flex>
69 <Flex flexWrap="wrap" gap="12px" mb="16px">
70 <Button
71 className={css({ h: 'min-content' })}
72 colors={{
73 primary: 'steelblue',
74 }}
75 >
76 Default
77 </Button>
78 <Button
79 className={css({ h: 'min-content' })}
80 colors={{
81 primary: 'steelblue',
82 }}
83 variant="primary"
84 >
85 Primary
86 </Button>
87 <Button
88 className={css({ h: 'min-content' })}
89 colors={{
90 error: 'steelblue',
91 }}
92 danger
93 >
94 Danger
95 </Button>
96 </Flex>
97 </Box>
98 )
99}
1001import { Button } from '@devup-ui/components'
2import { Box, css, Flex } from '@devup-ui/react'
3
4export default function Colors() {
5 return (
6 <Box w="100%">
7 <Flex flexWrap="wrap" gap="12px" mb="16px">
8 <Button
9 className={css({ h: 'min-content' })}
10 colors={{
11 primary: 'orange',
12 text: 'chocolate',
13 }}
14 >
15 Default
16 </Button>
17 <Button
18 className={css({ h: 'min-content' })}
19 colors={{
20 primary: 'orange',
21 text: 'chocolate',
22 }}
23 variant="primary"
24 >
25 Primary
26 </Button>
27 <Button
28 className={css({ h: 'min-content' })}
29 colors={{
30 error: 'orange',
31 text: 'chocolate',
32 }}
33 danger
34 >
35 Danger
36 </Button>
37 </Flex>
38 <Flex flexWrap="wrap" gap="12px" mb="16px">
39 <Button
40 className={css({ h: 'min-content' })}
41 colors={{
42 primary: 'darkgreen',
43 text: 'darkseagreen',
44 }}
45 >
46 Default
47 </Button>
48 <Button
49 className={css({ h: 'min-content' })}
50 colors={{
51 primary: 'darkgreen',
52 text: 'darkseagreen',
53 }}
54 variant="primary"
55 >
56 Primary
57 </Button>
58 <Button
59 className={css({ h: 'min-content' })}
60 colors={{
61 error: 'darkgreen',
62 text: 'darkseagreen',
63 }}
64 danger
65 >
66 Danger
67 </Button>
68 </Flex>
69 <Flex flexWrap="wrap" gap="12px" mb="16px">
70 <Button
71 className={css({ h: 'min-content' })}
72 colors={{
73 primary: 'steelblue',
74 }}
75 >
76 Default
77 </Button>
78 <Button
79 className={css({ h: 'min-content' })}
80 colors={{
81 primary: 'steelblue',
82 }}
83 variant="primary"
84 >
85 Primary
86 </Button>
87 <Button
88 className={css({ h: 'min-content' })}
89 colors={{
90 error: 'steelblue',
91 }}
92 danger
93 >
94 Danger
95 </Button>
96 </Flex>
97 </Box>
98 )
99}
100API
Button props extends the button HTML attributes.
| Prop | description | Type | Default |
|---|---|---|---|
| variant | The variant of the button |
|
|
| colors | The color variables of the button, i.e. |
|
|
| danger | Signals that it should be used with caution. It is often used in a delete button or to show the error status. |
|
|
| size | The size of the button |
|
|
| icon | Icon of the button passed in as a form of ReactNode |
|
|
| ellipsis | Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text. |
|
|
Contents
Edit this page