Context

Updated:

A component that provides additional context to the user.

Slots

The q2-context element has multiple slots that can be used to insert custom content into the component.

Learn more about slots

An optional slot that supports up to two elements compatible with Action Group. Use this to provide the user with actions related to the context description.

An optional slot that supports either a Button or a Dropdown. Use this to provide an affordance such as a dismiss button, or a dropdown kebab menu for the user.

An optional slot that supports either Icon or Avatar. Use this as a visual aid for the context being provided.

A required slot. Use this to provide the bulk of the context you wish to convey to the user.

An optional slot to display additional HTML content.

A required slot that must be a single <h4> element. Use this to indicate the purpose or subject of the context being provided.

Properties

Learn more about properties.

separator

Renders a horizontal line between the description and the action-group/footer slots.

Release Notes

Initial Release

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.

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

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!

  • q2-item
  • q2-action-group