Indicator

A simple dot-styled position indicator bar. This is currently not intended to be used as navigation but only a visual indicator.

React Component

Default

Page 1
Page 2
Page 3
Page 4
Page 5

Show Text

Page 2 of 5

Sage Component

SageIndicator

<h3 class="t-sage-heading-6">Default</h3>
<%= sage_component SageIndicator, {
  current_item: 2,
  label: "Page",
  num_items: 5,
} %>


<h3 class="t-sage-heading-6">Show Text</h3>
<%= sage_component SageIndicator, {
  current_item: 2,
  label: "Page",
  num_items: 5,
  show_text: true
} %>

Property	Description	Type	Default
`current_item`	The item that is "selected" in the indicator list.	Integer	`nil`
`label`	The label to prepend in front of the number for the indicator in visually-hidden text.	String	`nil`
`num_items`	The total number of items to display.	Integer	`nil`
`preposition`	The preposition is between the two page numbers. This allows for words other than "of".	String	of
`show_text`	When enabled, this replaces the indicator dots with text to represent the current page.	Boolean	`nil`