diff --git a/src/patterns/01-core/elements/_details.scss b/src/patterns/01-core/elements/_details.scss
index 6dffe9ccdfcd1558b5a11c060b71887ae5f8abd6..de2c96a49cc5402f50f6d81021e25ddfd7e5ce0e 100644
--- a/src/patterns/01-core/elements/_details.scss
+++ b/src/patterns/01-core/elements/_details.scss
@@ -58,7 +58,7 @@
display:block;
font-family: var(--font-book);
font-size: var(--font-size-00);
- font-weight: var(--font-weight-700);
+ font-weight: var(--font-weight-3300);
margin: 0;
line-height: 1.25;
outline: 0;
diff --git a/src/patterns/01-core/mixins/_button.scss b/src/patterns/01-core/mixins/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d96739d479a30a20882010a175e162026f20248a
--- /dev/null
+++ b/src/patterns/01-core/mixins/_button.scss
@@ -0,0 +1,150 @@
+// @file
+// Button styles
+
+$button-border-radius: 0 !default;
+$button-background-color: var(--gray-5) !default;
+$button-background-color-active: var(--gray-5) !default;
+$button-background-color-disabled: var(--gray-2) !default;
+$button-background-color-hover: var(--gray-2) !default;
+$button-background-image: none !default;
+$button-text-color: var(--uw-white) !default;
+$button-text-color-active: var(--uw-white) !default;
+$button-text-color-disabled: var(--gray-4) !default;
+$button-text-color-hover: var(--gray-6) !default;
+$button-text-shadow: none !default;
+$button-font-size: var(--font-size-1) !default;
+
+@mixin button(
+ $color-background: $button-background-color,
+ $color-text: $button-text-color,
+ $color-background-hover: $button-background-color-hover,
+ $color-text-hover: $button-text-color-hover,
+ $color-background-active: $button-background-color-active,
+ $color-text-active: $button-text-color-active,
+ $color-background-disabled: $button-background-color-disabled,
+ $color-text-disabled: $button-text-color-disabled,
+ $border-radius: $button-border-radius,
+ $font-size: $button-font-size
+) {
+ background-color: $color-background;
+ background-image:$button-background-image;
+ border: 0;
+ border-radius: $border-radius;
+ box-shadow:none;
+ color: $color-text;
+ cursor: pointer;
+ display: inline-block;
+ font-family: var(--font-condensedbook);
+ font-size: $button-font-size;
+ font-weight: var(--font-weight-300);
+ letter-spacing: var(--font-letterspacing-2);
+ line-height: var(--font-lineheight-4);
+ max-width:18.125rem;
+ padding: var(--size-2) var(--size-4);
+ text-align: center;
+ text-decoration: none;
+ text-shadow:$button-text-shadow;
+ text-transform:uppercase;
+ transition: background 200ms ease-in;
+ vertical-align: top;
+ white-space: normal;
+ width:100%;
+ &:visited {
+ color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: $color-background-hover;
+ background-image:$button-background-image;
+ border: 0;
+ box-shadow: none !important;
+ color: $color-text-hover;
+ outline: none !important;
+ text-decoration: none;
+
+ }
+
+ &:active {
+ background-color: $color-background-active;
+ background-image:$button-background-image;
+ color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ background-color: $color-background-disabled;
+ background-image:$button-background-image;
+ color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+}
+
+
+@mixin button-reset(
+ $color-background: inherit,
+ $color-text: inherit,
+ $color-background-hover: inherit,
+ $color-text-hover: inherit,
+ $color-background-active: inherit,
+ $color-text-active: inherit,
+ $color-background-disabled: inherit,
+ $color-text-disabled: inherit,
+ $border-radius: inherit,
+ $font-size: inherit
+) {
+ background-color: $color-background;
+ background-image:$button-background-image;
+ border: 0;
+ border-radius: $border-radius;
+ box-shadow:none;
+ color: $color-text;
+ cursor: pointer;
+ display: inherit;
+ font-family: inherit;
+ font-size: $font-size;
+ font-weight: inherit;
+ letter-spacing: inherit;
+ line-height: inherit;
+ max-width: inherit;
+ padding: inherit;
+ text-align: inherit;
+ text-decoration: inherit;
+ text-shadow:inherit;
+ text-transform:inherit;
+ transition: inherit;
+ vertical-align: inherit;
+ white-space: inherit;
+ width: inherit;
+ &:visited {
+ color: $color-text;
+ }
+
+ &:hover,
+ &:focus {
+ background-color: $color-background-hover;
+ background-image:$button-background-image;
+ border: 0;
+ box-shadow: none !important;
+ color: $color-text-hover;
+ outline: none !important;
+ text-decoration: none;
+
+ }
+
+ &:active {
+ background-color: $color-background-active;
+ background-image:$button-background-image;
+ color: $color-text-active;
+ outline: none !important;
+ }
+
+ &[disabled] {
+ background-color: $color-background-disabled;
+ background-image:$button-background-image;
+ color: $color-text-disabled;
+ cursor: default;
+ pointer-events: none;
+ }
+}
diff --git a/src/patterns/01-core/mixins/_index.scss b/src/patterns/01-core/mixins/_index.scss
index 3736415187bc52b77234b96a678656367b93fe47..12cb9174c3990b15a0dd34f3d4e493fced562502 100644
--- a/src/patterns/01-core/mixins/_index.scss
+++ b/src/patterns/01-core/mixins/_index.scss
@@ -1,4 +1,5 @@
@forward 'accessiblity';
+@forward 'button';
@forward 'clearfix';
@forward 'headings';
@forward 'image-replace';
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index a7ce2463e3e1050e396d56f9dc714d5ee0baf28c..868ad676c3cd1e83600681910b96ea3078d242d9 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -225,5 +225,5 @@
.pl-colors .color-demo > div > div{
background-color: rgba(0,0,0,0.6);
font-family: var(--font-systembold);
- font-size: var(--font-size-00);
+ font-size: var(--font-size-000);
}
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index c46ebe15fe92dd6f2146520b43e246625cd0dcaa..cff6fade3f57b2590a3ce7d02c041c0a4bd969cf 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,4 +1,5 @@
@forward 'blockquote/blockquote';
+@forward 'button/button';
@forward 'card/card';
@forward 'tag-list/tag-list';
@forward 'tag/tag';
diff --git a/src/patterns/04-components/button/_button.scss b/src/patterns/04-components/button/_button.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e6e05c1934a2d3b93db32b445fbffad11cd548d5
--- /dev/null
+++ b/src/patterns/04-components/button/_button.scss
@@ -0,0 +1,94 @@
+// @file
+// Styles for Button.
+
+@use '../../01-core' as *;
+
+.button,
+ button{
+ @include button();
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--danger {
+ background-color: var(--red-9);
+ color: var(--uw-white);
+
+ &:hover,
+ &:focus {
+ background-color: var(--cgc-3);
+ color: var(--uw-white);
+
+ }
+
+ &:active {
+ background-color: var(--cgc-4);
+ color: var(--uw-white);
+ }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--medium {
+ font-size: var(--font-size-000);
+ max-width: var(--size-20);
+ padding: var(--size-1);
+ &:hover,
+ &:focus {
+ padding: var(--size-1);
+ }
+}
+
+// This custom button class, included as an example, is not output by Drupal by default.
+.button--small {
+ font-size: var(--font-size-0000);
+ max-width: var(--size-12);
+ padding: var(--size-05);
+ &:hover,
+ &:focus {
+ padding: var(--size-05);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--primary {
+ background-color: var(--green-8);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--green-9);
+ color: var(--uw-white);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--secondary {
+ background-color: var(--blue-5);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--blue-9);
+ color: var(--uw-white);
+ }
+}
+
+// Drupal outputs this class on buttons that can delete content.
+.button--cancel,
+.button[data-drupal-selector="edit-cancel"]{
+ background-color: var(--orange-5);
+ color: var(--uw-white);
+ &:hover,
+ &:focus {
+ background-color: var(--orange-8);
+ color: var(--uw-white);
+ }
+}
+// Css within pattern lab.
+.pattern-lab-content .mobile-menu-button,
+.pl-c-pattern__extra-toggle{
+ max-width:inherit;
+ width:auto;
+
+}
+.pl-c-pattern .pl-c-demo button,
+.pl-c-pattern .pl-c-demo .button{
+ margin: 0 0 var(--size-1);
+}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.md b/src/patterns/04-components/button/button--cancel/button--cancel.md
new file mode 100644
index 0000000000000000000000000000000000000000..f547601f67fbac97069876a5772b7ab0cc3fdb0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.md
@@ -0,0 +1,12 @@
+---
+el: .button--cancel
+title: Cancel Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.twig b/src/patterns/04-components/button/button--cancel/button--cancel.twig
new file mode 100644
index 0000000000000000000000000000000000000000..4b1078a769bc5400f37513648f15df61acca5f42
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--cancel {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--cancel/button--cancel.yml b/src/patterns/04-components/button/button--cancel/button--cancel.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cffef5d967c6f37bd0919e290a222e0a10a59cbc
--- /dev/null
+++ b/src/patterns/04-components/button/button--cancel/button--cancel.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Cancel'
+text_demo: 'Cancel (Link)'
diff --git a/src/patterns/04-components/button/button--danger/button--danger.md b/src/patterns/04-components/button/button--danger/button--danger.md
new file mode 100644
index 0000000000000000000000000000000000000000..90d99731ad5136597e128c3f7732929ac79a5e0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.md
@@ -0,0 +1,12 @@
+---
+el: .button--danger
+title: Danger Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--danger/button--danger.twig b/src/patterns/04-components/button/button--danger/button--danger.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f0c8362acf11d2e72652c7cb54bbf1113159193f
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--danger {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--danger/button--danger.yml b/src/patterns/04-components/button/button--danger/button--danger.yml
new file mode 100644
index 0000000000000000000000000000000000000000..51477bd36f6829c80f9484c21f20917f1da4e9fc
--- /dev/null
+++ b/src/patterns/04-components/button/button--danger/button--danger.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Delete'
+text_demo: 'Delete (Link)'
diff --git a/src/patterns/04-components/button/button--large/button--large.md b/src/patterns/04-components/button/button--large/button--large.md
new file mode 100644
index 0000000000000000000000000000000000000000..22fe954d6e6165f02d2088a9971a667f0bcd0c5f
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.md
@@ -0,0 +1,12 @@
+---
+el: .button--large
+title: Large Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--large/button--large.twig b/src/patterns/04-components/button/button--large/button--large.twig
new file mode 100644
index 0000000000000000000000000000000000000000..9d395daaf63a5eee18d4493364d8d3040eff225e
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--large {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--large/button--large.yml b/src/patterns/04-components/button/button--large/button--large.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7c8ac2d6302f02ef52ce5164f90dc380ad446c0b
--- /dev/null
+++ b/src/patterns/04-components/button/button--large/button--large.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Submit'
+text_demo: 'Link'
diff --git a/src/patterns/04-components/button/button--medium/button--medium.md b/src/patterns/04-components/button/button--medium/button--medium.md
new file mode 100644
index 0000000000000000000000000000000000000000..6123ac5a27e826c2bd68488096a677ab158b4062
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.md
@@ -0,0 +1,12 @@
+---
+el: .button--medium
+title: Medium Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--medium/button--medium.twig b/src/patterns/04-components/button/button--medium/button--medium.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8a3419dab0e072baa45462adccc49cb817f70bb7
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--medium {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--medium/button--medium.yml b/src/patterns/04-components/button/button--medium/button--medium.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea
--- /dev/null
+++ b/src/patterns/04-components/button/button--medium/button--medium.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button--primary/button--primary.md b/src/patterns/04-components/button/button--primary/button--primary.md
new file mode 100644
index 0000000000000000000000000000000000000000..2b4fc2b72828e284a35d3e897d525d7a64641ed5
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.md
@@ -0,0 +1,12 @@
+---
+el: .button--primary
+title: Primary Button (save)
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--primary/button--primary.twig b/src/patterns/04-components/button/button--primary/button--primary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..cf637b5fe61e4daab28a9db4229fb8788374e398
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--primary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--primary/button--primary.yml b/src/patterns/04-components/button/button--primary/button--primary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..fb053e630bc3004c9605bb512f9788e0b92c5cf1
--- /dev/null
+++ b/src/patterns/04-components/button/button--primary/button--primary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Save'
+text_demo: 'Save Button'
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.md b/src/patterns/04-components/button/button--secondary/button--secondary.md
new file mode 100644
index 0000000000000000000000000000000000000000..a423e1d6f6dd82e492e73c93e775ff7009c2c871
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.md
@@ -0,0 +1,12 @@
+---
+el: .button--secondary
+title: Secondary Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.twig b/src/patterns/04-components/button/button--secondary/button--secondary.twig
new file mode 100644
index 0000000000000000000000000000000000000000..83e711079ae8b44cede77dc4adba12a40b8dc523
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--secondary {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
\ No newline at end of file
diff --git a/src/patterns/04-components/button/button--secondary/button--secondary.yml b/src/patterns/04-components/button/button--secondary/button--secondary.yml
new file mode 100644
index 0000000000000000000000000000000000000000..cebf6161d8481520069c560cf3810095ece9cfb2
--- /dev/null
+++ b/src/patterns/04-components/button/button--secondary/button--secondary.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Revert'
+text_demo: 'Revert Button'
diff --git a/src/patterns/04-components/button/button--small/button--small.md b/src/patterns/04-components/button/button--small/button--small.md
new file mode 100644
index 0000000000000000000000000000000000000000..860993d4bb3174412697a26e271559fb7b4ee41c
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.md
@@ -0,0 +1,12 @@
+---
+el: .button--small
+title: Small Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button--small/button--small.twig b/src/patterns/04-components/button/button--small/button--small.twig
new file mode 100644
index 0000000000000000000000000000000000000000..bb01b13dfcb1363e4591edfb4dd0e29297d2f8ae
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.twig
@@ -0,0 +1,9 @@
+{% set button_modifier_classes -%}
+ button--small {{ modifier_classes }}
+{%- endset %}
+
+{% include '@components/button/button.twig' with {
+ 'url': url,
+ 'text': text,
+ 'modifier_classes': button_modifier_classes,
+} %}
diff --git a/src/patterns/04-components/button/button--small/button--small.yml b/src/patterns/04-components/button/button--small/button--small.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea
--- /dev/null
+++ b/src/patterns/04-components/button/button--small/button--small.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/src/patterns/04-components/button/button.md b/src/patterns/04-components/button/button.md
new file mode 100644
index 0000000000000000000000000000000000000000..43ac105ef900bb8657f6a6add8674de92a2d9fe1
--- /dev/null
+++ b/src/patterns/04-components/button/button.md
@@ -0,0 +1,12 @@
+---
+el: .button
+title: Button
+---
+
+__Variables:__
+* is_button_tag: [boolean] Whether to output as a button element.
+* is_demo: [boolean] Whether to show extra demo examples.
+* is_disabled: [boolean] Whether this button is disabled. Not used for links.
+* modifier_classes: [string] Classes to modify the default component styling.
+* url: [string] URL of the button.
+* text: [string] Text of the button.
diff --git a/src/patterns/04-components/button/button.twig b/src/patterns/04-components/button/button.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8f0149a9ed5d3d5ca54fdc3714284f7e6c67da46
--- /dev/null
+++ b/src/patterns/04-components/button/button.twig
@@ -0,0 +1,83 @@
+{% if is_demo %}
+ <div class="pl-c-demo">
+{% endif %}
+{% if is_button_tag %}
+ <button
+ {% if data_type_name %}
+ data-value-{{ data_type_name }}="{{ data_type_value }}"
+ {% endif %}
+
+ {% if is_disabled %}
+ disabled
+ {% endif %}
+
+ {% if type %}
+ type="{{ type }}"
+ {% endif %}
+
+ {% if autofocus %}
+ autofocus="{{ autofocus }}"
+ {% endif %}
+
+ {% if formaction %}
+ formaction=" {{ formaction }}"
+ {% endif %}
+
+ {% if form %}
+ form="{{form}}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if formmethod %}
+ formmethod=" {{ formmethod }}"
+ {% endif %}
+
+ {% if formtarget %}
+ formtarget=" {{ formtarget }}"
+ {% endif %}
+
+ {% if name %}
+ name="{{ name }}"
+ {% endif %}
+
+ {% if formenctype %}
+ formenctype="{{ formenctype }}"
+ {% endif %}
+
+ {% if value %}
+ value="{{ value }}"
+ {% endif %}
+
+ {% if formnovalidate %}
+ formnovalidate
+ {% endif %}
+
+ {% if btnclick %}
+ onclick="{{ btnclick }}"
+ {% endif %}
+
+ class="button {{ modifier_classes }}"
+ >
+ {{ text }}
+ </button>
+{% else %}
+ <a {% if aria %} aria-{{ aria_type_name }}="{{ aria_type_value}}" {% endif %} {% if data_type_name %} data-{{ data_type_name }}="{{ data_type_value }}"{% endif %} {% if btn_id %} id="{{ btn_id }}" {% endif %} class="button {{ modifier_classes }}" href="{{ url }}" {% if btnclick %} onclick="{{ btnclick }}" {% endif %} {% if target %}target="{{ target }}" {% endif %}>
+ {{ text }}
+ </a>
+{% endif %}
+
+{% if is_demo %}
+ <br>
+
+ <a href="{{ url }}" class="button {{ modifier_classes }}">{{ text_demo }}</a>
+ <br>
+
+ <button class="button {{ modifier_classes }}" disabled>Disabled {{ text }}</button>
+{% endif %}
+
+{% if is_demo %}
+ </div>
+{% endif %}
diff --git a/src/patterns/04-components/button/button.yml b/src/patterns/04-components/button/button.yml
new file mode 100644
index 0000000000000000000000000000000000000000..5a1d8353928892b3f512d98fe4f8d6fbeb77a277
--- /dev/null
+++ b/src/patterns/04-components/button/button.yml
@@ -0,0 +1,19 @@
+---
+is_button_tag: true
+is_demo: true
+is_disabled: false
+autofocus: false
+formaction: 'form_action'
+form: 'form_id'
+formmethod: ''
+formtarget: 'form_target'
+name: ''
+formenctype: ''
+value: ''
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
+type: ''
+modifier_classes: ''
+btnclick : |
+ alert('Hello World!');
diff --git a/src/patterns/04-components/button/buttons.js b/src/patterns/04-components/button/buttons.js
new file mode 100644
index 0000000000000000000000000000000000000000..0172b28a6457e1a4bb4851a38a3fe24d2601cd4a
--- /dev/null
+++ b/src/patterns/04-components/button/buttons.js
@@ -0,0 +1,66 @@
+/**
+* @file
+* Javascript for buttons
+
+**/
+
+(function ($, Drupal) {
+ 'use strict';
+ Drupal.behaviors.buttons = {
+ attach: function (context, settings) {
+ // Only show the show/hide button if the user is logged in
+ //on the "view", "layout", or "latest version" tabs.
+ // (We have picked elements that should only exist on those pages,
+ // and only when the user has editing access.
+ //
+ $(document).ready(
+ function () {
+ /**
+ * Javascript for toggleTabs
+ * Allows for buttons to be used.
+ * @var {Object}
+ * @var {Object}
+ * @var {Object}
+ * @returns {boolean} css for toggle.
+ */
+ function toggleTabs() {
+ var x = document.getElementById('block-tabs');
+ var y = document.getElementsByClassName('uw-content-moderation')[0];
+ var z = document.getElementById('edit-moderation-state-wrapper');
+
+ if (x.style.display === 'none') {
+ x.style.display = 'block';
+ }
+ else {
+ x.style.display = 'none';
+ }
+ if (y) {
+ if (y.style.display === 'none') {
+ y.style.display = 'block';
+ }
+ else {
+ y.style.display = 'none';
+ }
+ }
+ if (z) {
+ if (z.style.display === 'none') {
+ z.style.display = 'block';
+ }
+ else {
+ z.style.display = 'none';
+ }
+ }
+ }
+
+ if ($('.user-logged-in .uw-content-moderation, .user-logged-in #edit-moderation-state-wrapper, .user-logged-in #block-tabs a.is-active[href$=\'latest\']').length) {
+ $('.uw-show-hide').show().on(
+ 'click', function () {
+ toggleTabs();
+ }
+ );
+ }
+ }
+ );
+ }
+ };
+})(jQuery, Drupal);