Skip to content

Floating banner - Web Component

The FloatingBanner component can be used imported from:

Playground

Parameters

The Web component uses the <z-floating-banner> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

The parametrization of the component can be done with the following custom HTML params:

NameTypeDescriptionSlotA11y
headerstringHeader of the bannerheader
configstringConfiguration of the banner
accept-button-textstringText of the accept buttonaccept-button-text
reject-button-textstringText of the reject buttonreject-button-text

Events

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
acceptvoid
rejectvoid
closevoid

Slots

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspanContent of the banner
headerspanHeader of the banner
actionsspanActions of the banner
accept-button-textspanAccept button text
reject-button-textspanReject button text

Parameters use

content

The content parameter is used to define the content of the floating banner component. It uses the default slot too.

Floating banner content

The header parameter is a string that defines the header of the floating banner.

Also, you can use the header slot to define the header of the floating banner.

Floating banner headerFloating banner content

config

The config parameter is a string that defines the floating banner configuration. You can configure the position of the banner.

left

The left modifier is used to align the floating banner to the left. Also it will automatically add a z-smiling-z component to the floating banner.

small

The small modifier is used to render the small variant of the z-smiling-face. To use this modifier you need to add the left modifier to the z-floating-banner as well. The pattern is config="left:small".

Actions

accept-button-text

The accept-button-text parameter is a string that defines the text of the accept button.

reject-button-text

The reject-button-text parameter is a string that defines the text of the reject button.

Floating banner content

Both buttons can be customized using the accept-button and reject-button slots.

Floating banner contentAcceptDecline

You can add custom using the actions slot.

Floating banner contentVisitSave

Browser support

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples

CodeSandbox example