diff options
Diffstat (limited to 'packages/forms/src/button')
-rw-r--r-- | packages/forms/src/button/index.tsx | 12 |
1 files changed, 11 insertions, 1 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index d2c5ad96d..784ead04c 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -10,7 +10,7 @@ import Loader from 'react-loader'; | |||
10 | 10 | ||
11 | import { IFormField, IWithStyle } from '../typings/generic'; | 11 | import { IFormField, IWithStyle } from '../typings/generic'; |
12 | 12 | ||
13 | type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted'; | 13 | type ButtonType = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'inverted'; |
14 | 14 | ||
15 | interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle { | 15 | interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle { |
16 | buttonType?: ButtonType; | 16 | buttonType?: ButtonType; |
@@ -61,6 +61,14 @@ const styles = (theme: Theme) => ({ | |||
61 | fill: theme.buttonSecondaryTextColor, | 61 | fill: theme.buttonSecondaryTextColor, |
62 | }, | 62 | }, |
63 | }, | 63 | }, |
64 | success: { | ||
65 | background: theme.buttonSuccessBackground, | ||
66 | color: theme.buttonSuccessTextColor, | ||
67 | |||
68 | '& svg': { | ||
69 | fill: theme.buttonSuccessTextColor, | ||
70 | }, | ||
71 | }, | ||
64 | danger: { | 72 | danger: { |
65 | background: theme.buttonDangerBackground, | 73 | background: theme.buttonDangerBackground, |
66 | color: theme.buttonDangerTextColor, | 74 | color: theme.buttonDangerTextColor, |
@@ -144,6 +152,7 @@ class ButtonComponent extends Component<IProps> { | |||
144 | render() { | 152 | render() { |
145 | const { | 153 | const { |
146 | classes, | 154 | classes, |
155 | className, | ||
147 | theme, | 156 | theme, |
148 | disabled, | 157 | disabled, |
149 | id, | 158 | id, |
@@ -185,6 +194,7 @@ class ButtonComponent extends Component<IProps> { | |||
185 | [`${classes.button}`]: true, | 194 | [`${classes.button}`]: true, |
186 | [`${classes[buttonType as ButtonType]}`]: true, | 195 | [`${classes[buttonType as ButtonType]}`]: true, |
187 | [`${classes.disabled}`]: disabled, | 196 | [`${classes.disabled}`]: disabled, |
197 | [`${className}`]: className, | ||
188 | })} | 198 | })} |
189 | disabled={disabled} | 199 | disabled={disabled} |
190 | > | 200 | > |