Banner

Keep page-wide information visible at the top of the screen.

<sy-banner-message>Installation guide Basic usage

Live preview

Interact with the component to see results here.

StatusTitleDescription

Show iconAllow dismissal

View code

HTML

<sy-banner-message
  variant="info"
  header="Service notice"
  message="Your changes have been applied."
  showicon
  closable
></sy-banner-message>

Usage guide

Use for page-wide notices, such as maintenance or important policies. Toast is better for brief completion feedback.

Key message: Put the main point in header and details in message.
Follow-up action: Place a related action in the footer slot. Enable closable only for notices users may dismiss.

Examples

Notice

Communicate information that applies to the entire page.

View code

HTML

<sy-banner-message
  variant="info"
  header="New feature"
  message="You can now share projects with your team."
  showicon
></sy-banner-message>

Situations requiring attention

Show conditions users should know before continuing their work.

View code

HTML

<sy-banner-message
  variant="warning"
  header="Check your connection"
  message="Check your connection before saving changes."
  showicon
></sy-banner-message>

Error notice

Explain errors that affect the task and what to do next.

View code

HTML

<sy-banner-message
  variant="error"
  header="Unable to save"
  message="Your input has been preserved. Check your connection and try again."
  showicon
></sy-banner-message>

Dismissible notice

The close button removes the current Banner from the document.

View code

HTML

<sy-banner-message
  variant="success"
  header="Setup complete"
  message="Your new settings are ready to use."
  showicon
  closable
></sy-banner-message>

Follow-up action

Place a button in the footer slot to provide an action related to the notice.

View code

HTML

<sy-banner-message
  header="Project invitation"
  message="Review the invitation details."
  showicon
>
  <sy-button slot="footer" size="small">Review invitation</sy-button>
</sy-banner-message>

Success notice

Confirm that changes were applied with a success banner.

View code

HTML

<sy-banner-message
  variant="success"
  header="Service notice"
  message="Your changes have been applied."
  showicon
  closable
  id="supplement-1"
></sy-banner-message>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "variant": "success"
  });
</script>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Property · Message

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Property · Slot Message

See how settings change appearance and behavior.

View code

HTML

Loading the example.

Usage examples · Success notice

Confirm that changes were applied with a success banner.

View code

HTML

<sy-banner-message
  variant="success"
  header="Service notice"
  message="Your changes have been applied."
  showicon
  closable
  id="supplement-1"
></sy-banner-message>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "variant": "success"
  });
</script>

API reference

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

`<sy-banner-message>`

Properties

Type	Default	Description
`boolean`	`false`	Show the close button.
`boolean`	`false`	Show the status icon.
`string`	`''`	SVG string for the neutral state.
`string`	`''`	Help text about the input state.
`string`	`''`	Notification title.
`'info' \| 'success' \| 'warning' \| 'error' \| 'neutral'`	`'info'`	Component display style.

Slots

Slot	Description
	Component body or child items.
	Content displayed in the footer area.

Banner

Usage guide

Examples

Notice

Situations requiring attention

Error notice

Dismissible notice

Follow-up action

Success notice

Feature examples

Usage examples · Overview

Property · Closable

Property · Header

Property · Message

Property · Neutral Icon

Property · Show Icon

Property · Slot Footer

Property · Slot Message

Property · Variant

Usage examples · Success notice

API reference

`<sy-banner-message>`

Properties

Slots