OpenProject Lookbook

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<div style="display: flex; gap: 1rem;">
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button Button--invisible-noVisuals">  <span class="Button-content">
      <span class="Button-label">Button</span>
    </span>
  </button>
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
      <span class="Button-visual Button-leadingVisual">
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search">
          <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
        </svg>
      </span>
      <span class="Button-label">Button</span>
    </span>
  </button>
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
      <span class="Button-label">Button</span>
    </span>
    <span class="Button-visual Button-trailingAction">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down">
        <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path>
      </svg>
    </span>
  </button>
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
      <span class="Button-label">Button</span>
      <span class="Button-visual Button-trailingVisual">
        <span class="d-flex" aria-hidden="true"><span title="15" data-view-component="true" class="Counter">15</span></span>
        <span class="sr-only">(<span title="15" data-view-component="true" class="Counter">15</span>)</span>
      </span>
    </span>
  </button>
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
      <span class="Button-visual Button-leadingVisual">
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye">
          <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path>
        </svg>
      </span>
      <span class="Button-label">Button</span>
      <span class="Button-visual Button-trailingVisual">
        <span class="d-flex" aria-hidden="true"><span title="15" data-view-component="true" class="Counter">15</span></span>
        <span class="sr-only">(<span title="15" data-view-component="true" class="Counter">15</span>)</span>
      </span>
    </span>
  </button>
  <button type="button" data-view-component="true" class="Button--invisible Button--medium Button">  <span class="Button-content">
      <span class="Button-visual Button-leadingVisual">
        <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-eye">
          <path d="M8 2c1.981 0 3.671.992 4.933 2.078 1.27 1.091 2.187 2.345 2.637 3.023a1.62 1.62 0 0 1 0 1.798c-.45.678-1.367 1.932-2.637 3.023C11.67 13.008 9.981 14 8 14c-1.981 0-3.671-.992-4.933-2.078C1.797 10.83.88 9.576.43 8.898a1.62 1.62 0 0 1 0-1.798c.45-.677 1.367-1.931 2.637-3.022C4.33 2.992 6.019 2 8 2ZM1.679 7.932a.12.12 0 0 0 0 .136c.411.622 1.241 1.75 2.366 2.717C5.176 11.758 6.527 12.5 8 12.5c1.473 0 2.825-.742 3.955-1.715 1.124-.967 1.954-2.096 2.366-2.717a.12.12 0 0 0 0-.136c-.412-.621-1.242-1.75-2.366-2.717C10.824 4.242 9.473 3.5 8 3.5c-1.473 0-2.825.742-3.955 1.715-1.124.967-1.954 2.096-2.366 2.717ZM8 10a2 2 0 1 1-.001-3.999A2 2 0 0 1 8 10Z"></path>
        </svg>
      </span>
      <span class="Button-label">Button</span>
      <span class="Button-visual Button-trailingVisual">
        <span class="d-flex" aria-hidden="true"><span title="15" data-view-component="true" class="Counter">15</span></span>
        <span class="sr-only">(<span title="15" data-view-component="true" class="Counter">15</span>)</span>
      </span>
    </span>
    <span class="Button-visual Button-trailingAction">
      <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-triangle-down">
        <path d="m4.427 7.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.396 7H4.604a.25.25 0 0 0-.177.427Z"></path>
      </svg>
    </span>
  </button>
  <button id="my-id" type="button" data-view-component="true" class="Button--invisible Button--medium Button Button--invisible-noVisuals">  <span class="Button-content">
      <span class="Button-label">Button with tooltip</span>
    </span>
  </button><tool-tip id="tooltip-5b7a62e9-a9b1-48dc-a565-5bfacfe6e5f0" for="my-id" popover="manual" data-direction="s" data-type="description" data-view-component="true" class="sr-only position-absolute">Tooltip text</tool-tip>
</div>

No notes provided.

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
43
44
45
46
47
48
49
50
51
52
53
54
<div style="display: flex; gap: 1rem;">
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do |component| %>
    <% component.with_leading_visual_icon(icon: :search) %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do |component| %>
    <% component.with_trailing_action_icon(icon: "triangle-down") %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do |component| %>
    <% component.with_trailing_visual_counter(count: "15") %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do |component| %>
    <% component.with_leading_visual_icon(icon: :eye) %>
    <% component.with_trailing_visual_counter(count: "15") %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
  )) do |component| %>
    <% component.with_leading_visual_icon(icon: :eye) %>
    <% component.with_trailing_visual_counter(count: "15") %>
    <% component.with_trailing_action_icon(icon: "triangle-down") %>
    Button
  <% end %>
  <%= render(Primer::Beta::Button.new(
      scheme: :invisible,
      size: :medium,
      id: "my-id"
  )) do |component| %>
    <% component.with_tooltip(text: "Tooltip text") %>
    Button with tooltip
  <% end %>
</div>

No params configured.