Shows the start of a long content and a button to read the rest. The button
only appears when the content is taller than maxHeight.
Set maxHeight in pixels. The content shows in full when it fits.
Use showLabel and hideLabel to name the button, and initialOpened to start open.
Keep a long text short inside a Card, so the next item stays in view.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| maxHeight | height in pixels of the content while collapsed | number | - | 100 |
| showLabel | text of the button while collapsed | string | - | 'Show more' |
| hideLabel | text of the button while open | string | - | 'Hide' |
| initialOpened | starts with the content open | boolean | - | false |
| ... | native props, passed to the root element | HTMLAttributes | 'id', 'className', ... | - |
The ref points at the root element.
The button is a native button with aria-expanded and aria-controls pointing at the content, so screen readers announce whether it is open. The collapsed text is still in the page, so screen readers read all of it.