syidaxdesign system
Home Pricing Settings
ComponentsFeedback

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.
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>

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

Attribute / PropertyTypeDefaultDescription
booleanfalseShow the close button.
booleanfalseShow 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

SlotDescription
Component body or child items.
Content displayed in the footer area.
Design SystemTab Navigate Enter Open