SusAlert

Inline feedback block — title + body, typed severity, optional close.

Package

SusKit · Atoms (commercial)

Open in Playground

SusKit · Atoms

Props

Name	Type	Default
Type	Prop<string>	"info"	v-model
Text	Prop<string>	""	v-model
Title	Prop<string>	""	v-model
Icon	Prop<string>	""	v-model
Closable	Prop<bool>	false	v-model
Prominent	Prop<bool>	false	v-model
Border	Prop<string>	"left"	v-model
Density	Prop<string>	"default"	v-model
Variant	Prop<string>	"tonal"	v-model

Slots

Name
(default)

Events

Name	Field	Payload
Close	OnClose	—

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

• sus-alert
• sus-alert__body
• sus-alert__close
• sus-alert__icon
• sus-alert__text
• sus-alert__title
• sus-alert--border-bottom
• sus-alert--border-left
• sus-alert--border-right
• sus-alert--border-top
• sus-alert--closable
• sus-alert--density-comfortable
• sus-alert--density-compact
• sus-alert--error
• sus-alert--flat
• sus-alert--info
• sus-alert--outlined
• sus-alert--prominent
• sus-alert--success
• sus-alert--text
• sus-alert--tonal
• sus-alert--warning
• unity-label
• unity-text-element

Usage

<template>
  <sus:SusAlert Type="warning"
                Title="Unsaved changes"
                Text="Leave this screen and you will lose edits."
                Variant="tonal"
                Closable="true"
                @close="OnDismiss" />
</template>

<script>
void OnDismiss() { /* hide or clear */ }
</script>

var alert = new SusAlert();
alert.Type.Value = "info";
alert.Title.Value = "Sync complete";
alert.Text.Value = "Your loadout is up to date.";
alert.Variant.Value = "tonal";
alert.OnClose += () => { /* … */ };

Type

info · success · warning · error

Variant

tonal · outlined · text · flat