diff --git a/packages/components/src/notice/README.md b/packages/components/src/notice/README.md index c32bf02a3de10..24fcf3142f862 100644 --- a/packages/components/src/notice/README.md +++ b/packages/components/src/notice/README.md @@ -31,4 +31,4 @@ The following props are used to control the display of the component. * `status`: (string) can be `warning` (yellow), `success` (green), `error` (red). * `onRemove`: function called when dismissing the notice * `isDismissible`: (boolean) defaults to true, whether the notice should be dismissible or not -* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. +* `actions`: (array) an array of action objects. Each member object should contain a `label` and either a `url` link string or `onClick` callback function. A `className` property can be used in case custom classes should be used for the button styles. If `className` is passed default classes e.g: is-default, is-link etc are not automatically added. diff --git a/packages/components/src/notice/index.js b/packages/components/src/notice/index.js index 90b2d908deee9..9d1f1b0fa8385 100644 --- a/packages/components/src/notice/index.js +++ b/packages/components/src/notice/index.js @@ -36,17 +36,34 @@ function Notice( {
{ children } - { actions.map( ( { label, url, onClick }, index ) => ( - - ) ) } + { actions.map( + ( + { + className: buttonCustomClasses, + label, + onClick, + url, + }, + index + ) => { + return ( + + ); + } + + ) }
{ isDismissible && ( View