Function shield

Creates a shield component that serves as a protective overlay for UI elements. The shield is typically used to block user interaction with underlying content.

Param: optionsOrContent

Either the content to display or the options object

Param: options

Configuration object

Param: content

The content to display (only used when options are provided)

Returns

A JSX element representing the shield component

Remarks

  • The default width is the same with bubble container. (350px)

Example

Basic usage with content

shield([
  text('This content is protected by a shield'),
  button({
    label: 'Close',
    onClick: () => closeShield(),
  }),
]);

Example

Usage with options and content

shield(
  {
    {overlay: true,
  },
  [
    text('This content is protected by a shield'),
    button({
      label: 'Close',
      onClick: () => closeShield(),
    }),
  ]
);

Settings