The heading component with optional editability and a copy-to-clipboard button. When editable is true, the heading becomes editable on focus, with accessibility and onChange support. Optionally, a hidden input can store the value for form submission, and a button can copy content to the clipboard inline.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
childrenJSX.Element

React element children (ignored when editable).

contentstring

The text content.

copyButtonAttributesobject

Custom attributes for the copy button.

copyButtonClassesstring | Array | object

Custom classes for the copy button.

customAttributesobject

Custom attributes for the component.

customClassesstring | Array | object

Custom classes for the component.

editableboolean

Whether the heading is editable on focus (default false).

idstring

Optional id attribute when editable.

namestring

Optional name attribute when editable.

onBlurfunction

Handler for blur event when editable.

onChangefunction

Handler for text changes when editable.

onCopyfunction

Handler for copy event when editable.

onFocusfunction

Handler for focus event when editable.

placeholderstring

Placeholder text when editable and empty (default empty string).

showCopyButtonboolean

Whether to show a button to copy the content to the clipboard (default false).

sizestring

The font size for the heading.

spacingstring | number | Array | object

The spacing for the component.

tagNamestring

The tag used for the heading, from h1 to h6.

typestring

The type of the heading, one of regular or boxed.

useHiddenInputboolean

Whether to include a hidden input for form submission (default false).

weightstring

The font weight for the heading.

refobject | null

Ref to the component.

Since
  • 1.1.15
Source
Returns:

The heading component.

Type: 
JSX.Element
Example
// With copy button inline, non-editable
<Heading tagName="h2" content="Copy Me" showCopyButton />

// Controlled usage with copy button inline
const [heading, setHeading] = useState("Editable Heading");
<Heading tagName="h2" content={heading} editable onChange={setHeading} showCopyButton />

// Self-managed form usage with copy button inline
<form>
  <Heading tagName="h2" content="Editable Heading" editable useHiddenInput name="heading" id="heading-1" showCopyButton />
  <button type="submit">Submit</button>
</form>