Cfa Ui Components

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
<!-- Primary -->
<a class="btn btn--primary btn--large" role="button" x-on:keydown.space.prevent="$el.click()" href="https://www.google.com">    Continue
</a>
<!-- Primary Small -->
<a class="btn btn--primary btn--small" role="button" x-on:keydown.space.prevent="$el.click()" href="https://www.google.com">    Continue
</a>
<!-- Primary With Icon -->
<a class="btn btn--primary btn--large" role="button" x-on:keydown.space.prevent="$el.click()" href="https://www.google.com">    <span class="inline-flex items-center justify-center gap-cfa-sm">
    <svg class="cfa-icon" width="24" height="24" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check_circle_outline"></use></svg>
    Continue
  </span>
</a>
<!-- Primary Small With Icon -->
<a class="btn btn--primary btn--small" role="button" x-on:keydown.space.prevent="$el.click()" href="https://www.google.com">    <span class="inline-flex items-center justify-center gap-cfa-sm">
    <svg class="cfa-icon" width="16" height="16" aria-hidden="true" focusable="false"><use href="/assets/uswds-sprite-36dd7ae2.svg#check_circle_outline"></use></svg>
    Continue
  </span>
</a>
<!-- Primary Disabled -->
<a class="btn btn--primary btn--large" role="button" x-on:keydown.space.prevent="$el.click()" disabled="disabled" aria-disabled="true" tabindex="-1" href="https://www.google.com">    Continue
</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Primary
render(ButtonComponent.new(label: I18n.t("cfaui.submit_button.label"), url: "https://www.google.com"))
# Primary Small
render(ButtonComponent.new(label: I18n.t("cfaui.submit_button.label"), url: "https://www.google.com", size: :small))
# Primary With Icon
render(ButtonComponent.new(label: I18n.t("cfaui.submit_button.label"), url: "https://www.google.com", icon: "check_circle_outline"))
# Primary Small With Icon
render(ButtonComponent.new(label: I18n.t("cfaui.submit_button.label"), url: "https://www.google.com", size: :small, icon: "check_circle_outline"))
# Primary Disabled
render(ButtonComponent.new(label: I18n.t("cfaui.submit_button.label"), url: "https://www.google.com", disabled: true))

No notes provided.

No params configured.