[CrButton]: Add custom size support (#25936)

Author: fallaciousreasoning

ui/webui/resources/cr_elements/cr_button/cr_button.html.ts

@@ -8,7 +8,7 @@ import type { CrButtonElement } from './cr_button.js';
 
 export function getHtml(this: CrButtonElement) {
   return html`
-<leo-button id="button" kind="outline" size="small">
+<leo-button id="button" kind="outline" size="${this.size}">
   <slot slot="icon-before" name="prefix-icon"></slot>
   <slot></slot>
   <slot slot="icon-after" name="suffix-icon"></slot>

ui/webui/resources/cr_elements/cr_button/cr_button.ts

@@ -52,12 +52,17 @@ leo-button {
       class: {
         type: String,
         reflect: true,
+      },
+      size: {
+        type: String,
+        reflect: true,
       }
     };
   }
 
   disabled: boolean = false;
   class: string = '';
+  size = 'small';
 
   private onClick_(e: Event) {
     if (this.disabled) {
@@ -92,6 +97,10 @@ leo-button {
         this.$.button.removeAttribute('isDisabled')
       }
     }
+
+    if (changedProperties.has('size')) {
+      this.$.button.setAttribute('size', this.size)
+    }
   }
 
   private classChanged() {