Message

Updated:

Use for contextual non-blocking notifications like success, error, or info alerts.

Properties

Learn more about properties.

appearance

The visual style of the message. The minimal style is for use cases where you have less space to display information.

description

Determines whether or not assistive technology immediately presents the content to the user, via the aria-live attribute.

type

The type of message to display on the screen.

Methods

The q2-message element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

present

Prompts assistive technology to announce the message.

Type signature

present() => Promise<void>

Development

Description-only Notifications

To use the q2-message element without the role="alert", add the description attribute to the element. This supports two key scenarios:

  • Displaying inline validation messages for input fields via the aria-describedby attribute.
  • Presenting contextual messages that do not need to be announced immediately for screen reader users.

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Account Settings Page

    How to build an Account Settings page in Tecton: six independent settings sections covering nickname, notifications, statement delivery, card management, spending limits, and overdraft protection.

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-message component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!

Dependencies

This component uses other components in the Tecton library, including:

  • q2-icon

Dependents

Other components in the Tecton library use this component, including:

  • q2-action-sheet
  • q2-calendar
  • q2-otp

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (13)