@synerise/ds-alert NPM

id: alert

title: Alert

Alert UI Component

Installation

npm i @synerise/ds-alert
or
yarn add @synerise/ds-alert

Usage

import Alert from '@synerise/ds-alert'

<Alert 
    mode="background-outline"
    showIcon
    type="success"
    message="Success!"
    description="Success description"
    showMoreLabel="Show more"
    onShowMore={() => {}}
/>

Demo

API

Property	Description	Type	Default
afterClose	Called when close animation is finished	() => void	-
closable	Whether Alert can be closed	boolean	-
closeText	Close text to show	string\	ReactNode	-
description	Additional content of Alert	string\	ReactNode	-
icon	Custom icon, effective when `showIcon` is `true`	ReactNode	-
message	Content of Alert	string\	ReactNode	-
showIcon	Whether to show icon	boolean	`false`
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	string	`info`
onClose	Callback when Alert is closed	(e: MouseEvent) => void	-
mode	Whether to render alert with outline, background, or transparent, options: `background`, `background-outline`, `outline`, `clear`	string	`background`
color	Set the color that overrides the standard color of alert, options: `blue`, `grey`, `green`, `yellow`, `red`, `pink`, `mars`, `orange`, `fern`, `cyan`, `purple`, `violet`	string

Alert.InlineAlert

Property	Description	Type	Default
type	Type of InlineAlert, options: `success`, `alert`, `warning`	`string`	`warning`
message	Message of alert	`string` \ `React.ReactNode`	-

Alert.SectionMessage

Property	Description	Type	Default
type	Type of SectionMessage, options: `notice`, `negative`, `positive`,`neutral`,`supply`,`service`,`entity`	`string`	`negative`
message	Message of section messsage	`React.ReactNode`	-
customColor	type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink`	`string`	-
customColorIcon	type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink`	`string`	-
color	type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`	`string`	-
mode	type of modes, options: `background`, `background-outline`,`outline`,`clear`	`string`	-
showMoreLabel	prop to show label	`React.ReactNode`	-
onShowMore	callback executed after clicking	`void`	-
newClient	prop to show button	`React.ReactNode`/`boolean`	-
moreButtons	prop to show buttons	`React.ReactNode`/`boolean`	-
withEmphasis	prop to show bolder text	`React.ReactNode`	-
withLink	prop to show highlited text	`React.ReactNode`	-
unorderedList	prop to show unordered list	`React.ReactNode`	-
withClose	prop to show close button	`React.ReactNode`	-
customIcon	prop to set custom icon	`React.ReactNode`	-
textButton	text for button	`string`	-

Alert.AlertSemanticColor

Property	Description	Type	Default
type	Type of AlertSemanticColor, options: `notice`, `negative`, `positive`,`informative`,`neutral`,`supply`,`service`,`entity`	`string`	`positive`
color	type of colors,options: `red`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`blue`	`string`	-
mode	type of modes, options: `background`, `background-outline`,`outline`,`shadow`	`string`	-

Alert.IconAlert

Property	Description	Type	Default
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	`string`	`warning`
message	Message of Icon Alert	`React.ReactNode`	-
disabled	prop to set disabled icon	`boolean`	-
withEmphasis	prop to show bolder text	`React.ReactNode`	-
withLink	prop to show highlited text	`React.ReactNode`	-
iconAlert	prop to set custom icon	`boolean`	-
hoverButton	prop to set hover state button	`boolean`	-
customIcon	prop to set custom icon	`React.ReactNode`	-

Alert.Toast

Property	Description	Type	Default
type	Type of Alert styles, options: `success`, `info`, `warning`, `error`	`string`	`warning`
message	Message of Icon Alert	`React.ReactNode`	-
button	prop to set button	`React.ReactNode`	-
expanded	prop to set show expanded content	`boolean`	-
onExpand	prop on click to show content	`isExpanded:boolean => void`	-
customColor	type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink`	`string`	-
customColorIcon	type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink`	`string`	-
color	type of colors,options: `red`, `green`,`yellow`,`grey`,`blue`	`string`	-
colorIcon	type of colors,options: `white`, `black`,`yellow`,`grey`,`blue`	`string`	-
customColorText	type of colors,options:`red`, `blue`, `green`,`yellow`,`grey`,`purple`,`violet`, `cyan`,`fern`,`orange`, `mars`,`pink`	`string`	-
withClose	prop to show close button	`React.ReactNode`	-
customIcon	prop to set custom icon	`React.ReactNode`	-
expander	prop to set expanded icon	`React.ReactNode`	-
expanderContent	prop to set custom icon	`React.ReactNode`	-
onCloseClick	Callback when Toast is closed	`(e: MouseEvent) => void`	-
show	prop to show Toast	`boolean`	-

Alert.BroadcastBar

Property	Description	Type	Default
type	Type of Alert styles, options: `success`, `warning`, `negative`	`string`	`warning`
color	type of colors,options: `red`, `green`,`yellow`	`string`	-
onCloseClick	prop to close broadcastBar	`void`	-
withEmphasis	prop to show bolder text	`React.ReactNode`	-
withLink	prop to show highlited text	`React.ReactNode`	-
withClose	prop to set closeIcon	`React.ReactNode`	-
button	prop to set button	`boolean`	-
textButton	string of button	`string`	-
text	string of withEmphasis or withLink	`string`	-

@synerise/ds-button @synerise/ds-icon @synerise/ds-unordered-list @synerise/ds-utils animate.css

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn @synerise/ds-information-card @synerise/ds-item-picker @synerise/ds-table @synerise/ds-step-card @synerise/design-system

1 month ago

2 months ago

23 days ago

25 days ago

1 month ago

3 months ago

3 months ago

3 months ago

2 months ago

2 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

11 months ago

10 months ago

10 months ago

11 months ago

11 months ago

10 months ago

10 months ago

9 months ago

10 months ago

1 year ago

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago