Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="p-8 flex flex-col gap-6 max-w-md">
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Small</p>
    <div class="midwest-progress-bar size-sm variant-default theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45">
        <div class="progress-fill" style="width: 45.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Default</p>
    <div class="midwest-progress-bar size-default variant-default theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="60">
        <div class="progress-fill" style="width: 60.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Large</p>
    <div class="midwest-progress-bar size-lg variant-default theme-primary">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75">
        <div class="progress-fill" style="width: 75.0%"></div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8 flex flex-col gap-6 max-w-md">
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Small</p>
    <%= midwest_progress_bar(value: 45, size: :sm) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Default</p>
    <%= midwest_progress_bar(value: 60) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Large</p>
    <%= midwest_progress_bar(value: 75, size: :lg) %>
  </div>
</div>

Sizes

Three size variants: sm, default, and lg.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Progress Bar/sizes

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."