Progress Bar

Displays progress with a value


Default

Cloning product: 70% progress

Default with Percentage

Cloning product: 70% progress
70%

Default with Disabled Tooltip

Cloning product: 17% progress

Tooltip Position - Bottom

Cloning product: 32% progress

Custom color

Reached limit: 86% progress

Sage Component

SageProgressBar
<h2 class="t-sage-heading-6">Default</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:PRIMARY_300],
  percent: 70,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Default with Percentage</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:SAGE_300],
  display_percent: true,
  percent: 70,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Default with Disabled Tooltip</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:ORANGE_300],
  disable_tooltip: true,
  percent: 17,
  label: "Cloning product"
} %>

<h2 class="t-sage-heading-6">Tooltip Position - Bottom</h2>
<%= sage_component SageProgressBar, {
  color: SageTokens::COLOR_PALETTE[:YELLOW_300],
  percent: 32,
  label: "Cloning product",
  tooltip_position: "bottom",
} %>

<h2 class="t-sage-heading-6">Custom color</h2>
<%= sage_component SageProgressBar, {
  background_color: SageTokens::COLOR_PALETTE[:PRIMARY_100],
  color: "#4edbe6",
  percent: 86,
  label: "Reached limit"
} %>
Property Description Type Default

color

Optional hex or SageTokens::COLOR_PALETTE value for the progress bar color.

String

nil

disable_tooltip

Option to disable the default tooltip.

Boolean

nil

display_percent

If true, displays the percentage to the right of the progress bar.

Boolean

nil

label

required

Sets aria-valuetext and content text for <progress> element.

String

nil

percent

required

Sets value, aria-valuenow and inline width style of progress bar.

Integer

nil

tooltip_position

Sets the tooltip position to either above or below the progress bar.

String: ["top", "bottom"]

nil