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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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">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">Success</p>
    <div class="midwest-progress-bar size-default variant-default theme-green">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
        <div class="progress-fill" style="width: 100.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Warning</p>
    <div class="midwest-progress-bar size-default variant-default theme-orange">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="70">
        <div class="progress-fill" style="width: 70.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Error</p>
    <div class="midwest-progress-bar size-default variant-default theme-red">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35">
        <div class="progress-fill" style="width: 35.0%"></div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Info</p>
    <div class="midwest-progress-bar size-default variant-default theme-cyan">
      <div class="progress-track" role="progressbar" aria-label="Progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55">
        <div class="progress-fill" style="width: 55.00000000000001%"></div>
      </div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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">Default</p>
    <%= midwest_progress_bar(value: 60) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Success</p>
    <%= midwest_progress_bar(value: 100, state: :success) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Warning</p>
    <%= midwest_progress_bar(value: 70, state: :warning) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Error</p>
    <%= midwest_progress_bar(value: 35, state: :error) %>
  </div>
  <div class="flex flex-col gap-2">
    <p class="text-sm font-medium text-theme-8">Info</p>
    <%= midwest_progress_bar(value: 55, state: :info) %>
  </div>
</div>

States

Semantic state themes: default, success, warning, error, and info.

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/states

Annotate a preview to embed its Figma design here:

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