File tree Expand file tree Collapse file tree 3 files changed +74
-0
lines changed
src/components/atoms/Button Expand file tree Collapse file tree 3 files changed +74
-0
lines changed Original file line number Diff line number Diff line change
1
+ @import ' @digitable-team/web-ui-components/src/scss/mixins' ;
2
+
3
+ .primary {
4
+ border : 1px solid $color-white ;
5
+ border-radius : 6px ;
6
+ padding : 18px 40px ;
7
+ background : transparent ;
8
+ color : $color-base ;
9
+ }
10
+
11
+ .success {
12
+ border : 1px solid $color-base ;
13
+ border-radius : 50px ;
14
+ background : transparent ;
15
+ color : $color-base ;
16
+
17
+ & :hover {
18
+ opacity : 0.9 ;
19
+ }
20
+ }
21
+
22
+ .round {
23
+ border-radius : 36px ;
24
+ }
25
+
26
+ .disabled {
27
+ color : $color-secondary ;
28
+ border-color : $color-secondary ;
29
+ }
Original file line number Diff line number Diff line change
1
+ import React , { ReactNode } from 'react'
2
+
3
+ import cx from 'classnames'
4
+
5
+ // eslint-disable-next-line css-modules/no-unused-class
6
+ import css from './Button.styles.module.scss'
7
+
8
+ export type ButtonProps = {
9
+ isRounded ?: boolean
10
+ isDisabled ?: boolean
11
+ className ?: string
12
+ type : 'primary' | 'success'
13
+ buttonType ?: 'button' | 'submit' | 'reset'
14
+ children ?: ReactNode | string
15
+ name ?: string
16
+ onClick ?: ( ) => void
17
+ }
18
+
19
+ export const Button = ( {
20
+ isRounded,
21
+ buttonType,
22
+ type,
23
+ name,
24
+ children,
25
+ isDisabled,
26
+ className,
27
+ onClick
28
+ } : ButtonProps ) => {
29
+ return (
30
+ < button
31
+ disabled = { isDisabled }
32
+ type = { buttonType }
33
+ role = { name }
34
+ name = { name }
35
+ onClick = { onClick }
36
+ className = { cx ( className , css [ type ] , {
37
+ [ css . round ] : isRounded ,
38
+ [ css . disabled ] : isDisabled
39
+ } ) }
40
+ >
41
+ { children }
42
+ </ button >
43
+ )
44
+ }
Original file line number Diff line number Diff line change
1
+ export * from './Button'
You can’t perform that action at this time.
0 commit comments