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="flex gap-4 items-center p-4">
  <span class="midwest-avatar size-default theme-red shape-circle has-presence" title="You tabbed on an Avatar for Alice Adams">
    <div class="letter" title="Alice Adams">
      AA
    </div>
    <span class="presence presence-online theme-green" aria-label="Online" role="img"></span>
  </span>
  <span class="midwest-avatar size-default theme-red shape-circle has-presence" title="You tabbed on an Avatar for Bob Baker">
    <div class="letter" title="Bob Baker">
      BB
    </div>
    <span class="presence presence-offline theme-gray" aria-label="Offline" role="img"></span>
  </span>
  <span class="midwest-avatar size-default theme-red shape-circle has-presence" title="You tabbed on an Avatar for Carol Clark">
    <div class="letter" title="Carol Clark">
      CC
    </div>
    <span class="presence presence-away theme-yellow" aria-label="Away" role="img"></span>
  </span>
  <span class="midwest-avatar size-default theme-red shape-circle has-presence" title="You tabbed on an Avatar for Dave Davis">
    <div class="letter" title="Dave Davis">
      DD
    </div>
    <span class="presence presence-busy theme-red" aria-label="Busy" role="img"></span>
  </span>
</div>
1
2
3
4
5
6
<div class="flex gap-4 items-center p-4">
  <%= midwest_avatar(name: 'Alice Adams', shape: :circle, presence: :online) %>
  <%= midwest_avatar(name: 'Bob Baker', shape: :circle, presence: :offline) %>
  <%= midwest_avatar(name: 'Carol Clark', shape: :circle, presence: :away) %>
  <%= midwest_avatar(name: 'Dave Davis', shape: :circle, presence: :busy) %>
</div>

Presence

Show an avatar with each available presence state: online, offline, away, and busy.

No params configured.

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

Accessibility

Figma embed for Avatar/presence

Annotate a preview to embed its Figma design here:

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