button sizes

projects/ui/src/lib/button/button.component.html

@@ -1,3 +1,3 @@
-<button [attr.data-appearance]="appearance">
+<button [attr.data-appearance]="appearance" [attr.data-size]="size">
   <ng-content></ng-content>
 </button>

projects/ui/src/lib/button/button.component.scss

@@ -2,11 +2,9 @@
   display: block;
 
   button {
-    padding: var(--sk-gap-m) var(--sk-gap-xl);
     display: flex;
     align-items: center;
     gap: var(--sk-gap-m);
-    border-radius: var(--sk-br-m);
     border: none;
     cursor: pointer;
     font-size: 1rem;
@@ -18,6 +16,7 @@
       opacity: 0.9;
     }
 
+    // Appearance
     &[data-appearance="default"], &[data-appearance="primary"] {
       background-color: var(--sk-primary-accent);
       color: #fff;
@@ -38,13 +37,33 @@
       color: #fff;
       background-color: transparent;
     }
+
+    // Size
+    &[data-size="small"] {
+      padding: var(--sk-gap-s) var(--sk-gap-l);
+      border-radius: var(--sk-br-m);
+    }
+    &[data-size="default"] {
+      padding: var(--sk-gap-m) var(--sk-gap-xl);
+      border-radius: var(--sk-br-m);
+    }
+    &[data-size="medium"] {
+      padding: var(--sk-gap-l) var(--sk-gap-xl);
+      border-radius: var(--sk-br-l);
+      gap: var(--sk-gap-l);
+    }
+    &[data-size="large"] {
+      padding: var(--sk-gap-xl) var(--sk-gap-xxxl);
+      border-radius: var(--sk-br-xl);
+      gap: var(--sk-gap-xl);
+    }
   }
 }
 
 :host::ng-deep {
 
   button {
-    &[data-appearance="default"], &[data-appearance="primary"] {
+    &[data-appearance="default"], &[data-appearance="primary"], &[data-appearance="secondary"]  {
 
       skirda-icon ng-icon {
         color: #fff!important;

projects/ui/src/lib/button/button.component.ts

@@ -1,4 +1,6 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, ContentChild, Input } from '@angular/core';
+import { IconComponent } from '../icon/icon.component';
+import { ButtonAppearance, ButtonSize } from './button.interface'
 
 @Component({
   selector: 'skirda-button',
@@ -6,7 +8,10 @@ import { Component, Input, OnInit } from '@angular/core';
   styleUrls: ['./button.component.scss'],
 })
 export class ButtonComponent {
-  @Input() appearance: string = 'default';
+  @ContentChild(IconComponent) icon!: IconComponent
+  @Input() appearance: ButtonAppearance = 'default';
+  @Input() size: ButtonSize = 'default'
+
 
   constructor() {}
 }

projects/ui/src/lib/button/button.interface.ts

@@ -1,6 +1,2 @@
-export type ButtonAppearance =
+export type ButtonAppearance = 'default' | 'primary' | 'secondary' | 'outline' | 'flat';
-  | 'default'
+export type ButtonSize = 'default' | 'small' | 'medium' | 'large';
-  | 'primary'
-  | 'secondary'
-  | 'outline'
-  | 'flat';

src/_themes.scss

@@ -145,4 +145,5 @@
   --sk-br-s: 0.25rem;
   --sk-br-m: 0.5rem;
   --sk-br-l: 0.75rem;
+  --sk-br-xl: 1rem;
 }

src/app/components/main/sections/game-page/game-page.component.html

@@ -41,7 +41,10 @@
           <skirda-avatar *ngFor="let friend of friends" [username]="friend"></skirda-avatar>
         </div>
       </div>
+      <skirda-button size="large" appearance="secondary">
+        <skirda-icon name="play" size="32"></skirda-icon>
         <skirda-heading size="1">Play</skirda-heading>
+      </skirda-button>
     </div>
   </div>
 </div>