ContextWarning

A context warning control

Import

import { ContextWarning } from "@schukai/monster/source/components/form/context-warning.mjs";

Source

View source code

Package

@schukai/monster

Since

3.55.0

Delete after

Values below 7 days can remove files before downstream systems have synced.

Introduction

monster-context-warning is useful for cautionary guidance that should be visible near a control before the user makes a risky decision.

Key Features

Warning emphasis: Uses a dedicated warning theme.
Close to the action: Keeps the caution attached to the relevant control.
Popper-based explanation: Can hold short warnings or mitigation steps.

Context Warning Retention

This example uses monster-context-warning for a risky retention policy input.

Delete after

Values below 7 days can remove files before downstream systems have synced.

Javascript

import "@schukai/monster/source/components/form/context-warning.mjs";<script type="module">import "@schukai/monster/source/components/form/context-warning.mjs";</script>

HTML

<div style="display:flex;align-items:center;gap:0.5rem;">
  <label for="context-warning-retention-demo">Delete after</label>
  <input id="context-warning-retention-demo" type="number" value="7" />
  <monster-context-warning>
    Values below 7 days can remove files before downstream systems have synced.
  </monster-context-warning>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Context Warning Delete

This example shows a destructive warning close to an irreversible action.

Delete workspace

This action removes uploads, schedules, and API keys. Export a backup first.

Javascript

import "@schukai/monster/source/components/form/context-warning.mjs";<script type="module">import "@schukai/monster/source/components/form/context-warning.mjs";</script>

HTML

<div style="display:grid;gap:0.75rem;max-inline-size:30rem;">
  <label for="context-warning-delete-demo">Delete workspace</label>
  <div style="display:flex;align-items:center;gap:0.5rem;">
    <input id="context-warning-delete-demo" type="text" value="legacy-tenant" />
    <monster-context-warning>
      This action removes uploads, schedules, and API keys. Export a backup first.
    </monster-context-warning>
  </div>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The warning variant uses the shared context base and a warning-specific icon theme so the semantics remain consistent with the rest of the library.

Styling Hooks

classes.button: Applies the warning color token set.
::part(button): Styles the warning trigger.
::part(popper): Styles the floating warning box.

HTML Structure

<monster-context-warning></monster-context-warning>

JavaScript Initialization

const element = document.createElement('monster-context-warning');
document.body.appendChild(element);

Exported

ContextWarning

Derived from

ContextBase

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the ContextBase.

Option

Type

Default

Description

templates

object

The templates for the control.

templates.main

string

undefined

The main template.

mode

string

auto

The mode of the popper. Possible values are `click`, `enter` and `hover`.

content

string

undefined

The content of the popper.

popper

object

undefined

The popper options.

popper.placement

string

undefined

The placement of the popper.

classes

object

Custom CSS classes.

classes.button

string

monster-theme-warning-2

CSS class for the button element.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the ContextBase.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the ContextBase.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.