Docs / Components
SenseMessageComponent
Compact inline feedback from @artificialsenselabs/ui for helper copy beside fields or in tight layouts.
Live demo: run nx serve showcase and open /components/message (port 4202).
Overview
Category: Feedback. Selector: sense-message. Import: import { SenseMessageComponent } from '@artificialsenselabs/ui';
<sense-message severity="warning" text="Email format looks unusual." />Inputs
| Input | Type | Default | Description |
|---|---|---|---|
severity | 'success' | 'info' | 'warning' | 'error' | 'info' | Semantic level — icon, colours, and live-region role. |
size | 'sm' | 'md' | 'lg' | 'md' | Typography and padding scale. |
text | string | null | null | Inline copy alternative to default slot projection. |
icon | SenseIconName | null | null | Override default severity icon glyph. |
closable | boolean | false | Shows close button; emits closed. |
closeAriaLabel | string | null | null | Accessible name override for close button. |
styleClass | string | null | null | Extra CSS classes on the host. |
messageId | string | null | null | Stable DOM id override. |
Accessibility
- Error and warning use
role="alert"witharia-live="assertive". - Info and success use
role="status"witharia-live="polite". - Icons are decorative (
aria-hidden="true"); message text carries meaning. - Close button label defaults to i18n
message.close.