Amber Design System

Notify the user without blocking the interaction on the UI.

import '@amber-ds/components/banner';

<amber-banner>
  Content here
</amber-banner>

Name	Type	Default value	Description
`active`	`Boolean`	`false`	If the element is visible
`title`	`String`	`Title`	Title of the banner, if empty the header will not be rendered
`labels`	`String`	`'First,Second'`	Comma-separated button labels
`state`	`String`	`''`	Visual state, options are: empty, `success`, `error`, `warning`, `info`

Name	Arguments	Return	Description
`.show()`	N/A	N/A	Display the banner and set the `active` attribute to `true`
`.hide()`	N/A	N/A	Hide the banner and set the `active` attribute to `false`

Name	Detail	Description
`confirm`	N/A	User has clicked the primary button of the banner
`cancel`	N/A	User has clicked the secondary button of the banner

Banner