Devup UI - Button

Button

Button

Button component is used to handle user interactions.

Examples

Colors 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}
100

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}
100

Danger 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}
21

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}
21

Disabled 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}
22

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}
22

Icon 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                            fill="none"
15                            height="24"
16                            viewBox="0 0 24 24"
17                            width="24"
18                            xmlns="http://www.w3.org/2000/svg"
19                        >
20                            <path
21                                clipRule="evenodd"
22                                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"
23                                fill="currentColor"
24                                fillRule="evenodd"
25                            />
26                        </svg>
27                    }
28                >
29                    With icon
30                </Button>
31
32                <Button
33                    className={css({ h: 'min-content' })}
34                    icon={
35                        <svg
36                            fill="none"
37                            height="24"
38                            viewBox="0 0 25 24"
39                            width="25"
40                            xmlns="http://www.w3.org/2000/svg"
41                        >
42                            <path
43                                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"
44                                fill="currentColor"
45                            />
46                        </svg>
47                    }
48                    variant="primary"
49                >
50                    Add
51                </Button>
52                <Button
53                    className={css({ h: 'min-content' })}
54                    danger
55                    icon={<IconDelete />}
56                >
57                    Delete
58                </Button>
59            </Flex>
60        </Box>
61    )
62}
63

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                            fill="none"
15                            height="24"
16                            viewBox="0 0 24 24"
17                            width="24"
18                            xmlns="http://www.w3.org/2000/svg"
19                        >
20                            <path
21                                clipRule="evenodd"
22                                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"
23                                fill="currentColor"
24                                fillRule="evenodd"
25                            />
26                        </svg>
27                    }
28                >
29                    With icon
30                </Button>
31
32                <Button
33                    className={css({ h: 'min-content' })}
34                    icon={
35                        <svg
36                            fill="none"
37                            height="24"
38                            viewBox="0 0 25 24"
39                            width="25"
40                            xmlns="http://www.w3.org/2000/svg"
41                        >
42                            <path
43                                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"
44                                fill="currentColor"
45                            />
46                        </svg>
47                    }
48                    variant="primary"
49                >
50                    Add
51                </Button>
52                <Button
53                    className={css({ h: 'min-content' })}
54                    danger
55                    icon={<IconDelete />}
56                >
57                    Delete
58                </Button>
59            </Flex>
60        </Box>
61    )
62}
63

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}
44

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}
44

API

Button props extends the button HTML attributes.

Prop	description	Type	Default
variant	The variant of the button	`'primary' \| 'default'`	`'default'`
colors	The color variables of the button, i.e. `var(--primary)`	`{ primary?: string error?: string text?: string border?: string inputBackground?: string primaryFocus?: string }`	`undefined`
danger	Signals that it should be used with caution. It is often used in a delete button or to show the error status.	`boolean`	`false`
size	The size of the button	`'sm' \| 'md' \| 'lg'`	`'md'`
icon	Icon of the button passed in as a form of ReactNode	`React.ReactNode`	`undefined`
ellipsis	Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text.	`boolean`	`false`