Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback. Default banners contain lower priority information and should always be dismissible.

Examples

  <.banner title="Order archived" >
        <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
  </.banner>

See

• https://polaris.shopify.com/components/feedback-indicators/banner
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/Banner/Banner.tsx

Attributes

• id (:string) (required) - id of the banner.
• title (:string) - Title content for the banner. Defaults to nil.
• icon (:any) - Status icon to display in the banner. Use only major icons.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
• hide_icon (:boolean) - Renders the banner without a status icon. Defaults to false.
• tone (:string) - Sets the status of the banner. Defaults to "info".
• on_dismiss (:any) - Callback when banner is dismissed. Defaults to nil.
• stop_announcements (:boolean) - Disables screen reader announcements when changing the content of the banner. Defaults to false.
• within_container (:boolean) - Change the render style to be within a content container, whatever that might mean. Defaults to false.
• Global attributes are accepted. the arbitrary HTML attributes to add to the banner container.

Slots

• action - Primary action for the banner. Accepts attributes:
  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.

• secondary_action - Action | Displays a secondary action. Accepts attributes:

  • content (:string) - Content the action displays.
  • disabled (:boolean) - Whether or not the action is disabled.
  • variant (:string) - Changes the visual appearance of the Button.Must be one of "plain", "primary", "secondary", "tertiary", or "monochromePlain".
  • tone (:string) - Sets the color treatment of the Button.Must be one of "critical", or "success".
  • full_width (:boolean) - Allows the button to grow to the width of its container.
  • size (:string) - Changes the size of the button, giving it more or less padding.Must be one of "micro", "slim", "medium", or "large".
  • navigate (:string) - Passes through to .link component.
  • patch (:string) - Passes through to .link component.
  • href (:string) - Passes through to .link component.
  • target (:string) - Passes through to .link component.
  • icon (:any) - Source of the icon.Examples include &OctantisWeb.Components.Polaris.Icons.arrow_right/1.
  • phx_click (:any) - Click function passed through to the button.
• inner_block