Note<mds-note>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
variantenumSpecifies the color variant for the element
deletabledeletablebooleanEnables the cross icon to perform cancel/delete action on element
Overview
The <mds-note> web component is the annotation surface of the Magma Design System: a short, colored sticky-note block used to attach a remark, reminder, or callout to surrounding content. It has no native HTML primitive - it renders as a semantic note region with an optional title and a decorative folded corner.
Semantic Behavior
Note role: Exposed to assistive technology as a standalone annotation (role="note") regardless of theme or variant.Deletable mode: When deletable is set, the component renders an embedded close button; activating it emits the delete event without removing the note itself, leaving the host application in control of dismissal.Delete event: mdsNoteDelete fires when the close control is activated, signalling intent to cancel or remove the note.Keyboard handling: While deletable, the close action is keyboard-reachable.Localized close label: The close button’s accessible title is resolved in the active language (el/en/es/it).Title vs. body slots: The named title slot holds the note heading; the default slot holds the note body text, HTML, or nested components.
Properties & Visual Configurations
deletable turns the note from a static annotation into a dismissible one by exposing the close control and its delete event; pick it only when the consuming application is prepared to handle mdsNoteDelete.
Component-specific variants and tones
<mds-note> does not use the shared tone / variant ladders from agents/variants.md. Instead, its variant prop selects a flat color palette for the note paper (the ThemeLabelVariantType set, e.g. 'yellow', 'blue', 'green', 'red'), defaulting to 'yellow'. Choose the color to convey the note’s category, not a state or a hierarchy of emphasis: a label color never communicates state, for a warning or an error use mds-banner.