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
<div class="flex items-center justify-center p-16">
  <button class="midwest-button variant-default size-default theme-primary" name="button">
    <span class="midwest-button-content">Click me</span>
    <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
      <div class="midwest-loading-icon-inner">
        <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
        <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
          <circle cx="15" cy="15" r="15">
            <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
          <circle cx="60" cy="15" r="9" fill-opacity="0.3">
            <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
          <circle cx="105" cy="15" r="15">
            <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
            <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
          </circle>
        </svg>
      </div>
    </div>
  </button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<% tip = params[:tooltip].presence %>
<% tooltip_opts = tip ? { tip: tip, placement: (params[:tooltip_placement] || "top").to_sym } : nil %>
<% icon_val = params[:icon].presence&.to_sym %>
<div class="flex items-center justify-center p-16">
  <%= midwest_button(
    params[:label] || "Click me",
    variant: (params[:variant] || "default").to_sym,
    size: (params[:size] || "default").to_sym,
    state: (params[:state] || "default").to_sym,
    as: (params[:as] || "button").to_sym,
    pill: params[:pill] == "true",
    disabled: params[:disabled] == "true",
    icon: icon_val,
    icon_position: (params[:icon_position] || "start").to_sym,
    tooltip: tooltip_opts
  ) %>
</div>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

The button label

Visual style variant

Button size

Semantic colour state

Rendered HTML element

Fully rounded pill shape

Disabled appearance and behaviour

Optional leading or trailing icon

Icon position relative to label

Optional tooltip text shown on hover

Tooltip placement

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

Accessibility

Figma embed for Button/playground

Annotate a preview to embed its Figma design here:

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