Skip to content

HiddenTextExpander

Use hidden text expander to indicate and toggle hidden text.
  • Alpha
  • Not reviewed for accessibility

Use HiddenTextExpander to indicate and toggle hidden text.

Accessibility

HiddenTextExpander requires an aria-label, which will provide assistive technologies with an accessible label. The aria-label should describe the action to be invoked by the HiddenTextExpander. For instance, if your HiddenTextExpander expands a list of 5 comments, the aria-label should be "Expand 5 more comments" instead of "More".

Arguments

NameTypeDefaultDescription
inlineBooleanfalseWhether or not the expander is inline.
button_argumentsHash{}System arguments for the button element.
system_argumentsHashN/ASystem arguments

Examples

Default

<%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>

Inline

<%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>

Styling the button

<%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>