Entity<mds-entity>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
toneenumSpecifies the color tone of the component
variantenumSpecifies the color variant of the component
awaitawaitbooleanSpecifies if the component is awaiting a response from an external resource
iconstringSpecifies the icon to be displayed if src propery is not used
initialsstringThe user's inizials displayed if there's no image available and icon is not set
srcstringSpecifies the path to the image
Overview
The <mds-entity> web component represents a person, organization, or resource as a compact identity block in the Magma Design System, pairing an avatar with a name, optional secondary details, and contextual actions. It has no native HTML equivalent; it standardises how entities are surfaced in lists, headers, and cards.
Semantic Behavior
Avatar resolution: The leading avatar renders only when one of src, icon, or initials is provided. The inner mds-avatar resolves a combination pairwise: icon hides the src image, initials hide the icon, src hides the initials, and with all three set it shows none of them.Await state: While await is set the avatar is suppressed and a spinner is shown in its place, signalling that the entity is still loading.Conditional regions: The detail and action regions are shown only while content is projected into those slots, also when it is added after the first render.Default slot is the name: The default slot carries the entity’s primary label (text, HTML, or components) and is always rendered inside the info column.
Properties & Visual Configurations
src is the path to an entity image; icon is a Magma icon library slug; initials is the text shown when no image or icon fits. Provide only the one that best identifies the entity - they are not combined.await marks the entity as loading and takes visual precedence over any avatar source.The shared tone / variant ladders are defined in agents/variants.md and color the inner avatar. tone is limited to the minimal 'strong' / 'weak' pair, and variant accepts the avatar colour set; pick them to colour the avatar chip in line with the entity’s category. With initials the avatar derives its colour from the letters and ignores variant.
Slots
detail holds secondary information (role, email, status) rendered beneath the name.action holds trailing controls; mds-button is the recommended element here.