Note

This documentation describes the DocumentationButton Vue component for native UI views for Xml templates see documentation-button.

DocumentationButton

Renders an inline documentation help button that opens a popover with a title and HTML body text.

Import

import { DocumentationButton } from '@neos/design-system'

Props

Prop	Type	Default	Description
title	string	—	Required. Header text of the documentation popover
text	string	—	Required. HTML body content of the documentation popover

Usage Examples

Help button next to a field label

<HorizontalLayout space="extrasmall" vertical-align="center">
  <Text>API Key</Text>
  <DocumentationButton
    title="API Key"
    text="<p>Your API key can be found in the account settings page.</p>"
  />
</HorizontalLayout>

Next to a section heading

<HorizontalLayout space="small" vertical-align="center">
  <Heading :level="3">Webhook Configuration</Heading>
  <DocumentationButton
    title="Webhook Configuration"
    text="<p>Webhooks allow external services to be notified when events occur.</p>"
  />
</HorizontalLayout>

Notes

• When bound to a ViewModel property, prefer BoundDocumentationButton which resolves the title and text automatically from the property metadata.