mm

apps/ui-site/src/App.tsx

@@ -1,11 +1,11 @@
-import { ThemeProvider } from "@defgov/ui";
+import { Skin } from "@defgov/ui";
 import { ButtonGallery } from "./gallery/ButtonGallery";
 
 const App = () => {
   return (
-    <ThemeProvider>
+    <Skin>
       <ButtonGallery />
-    </ThemeProvider>
+    </Skin>
   );
 };
 

apps/ui-site/src/gallery/ButtonGallery.tsx

@@ -6,11 +6,67 @@ export const ButtonGallery = () => {
   return (
     <OuterWrap>
       <InnerWrap>
-        <Button variant="filled" icon={<DownloadSvg />}>
+        <Button variant="filled" icon={<DownloadSvg />} size="md">
+          Button
+        </Button>
+        <Button variant="filled" icon={<DownloadSvg />} size="lg">
+          Button
+        </Button>
+        <Button variant="filled" icon={<DownloadSvg />} size="xl">
+          Button
+        </Button>
+      </InnerWrap>
+      <InnerWrap>
+        <Button variant="filled" brand="default">
+          Buttun
+        </Button>{" "}
+        <Button variant="outline" brand="default">
+          Buttun
+        </Button>{" "}
+        <Button variant="subtle" brand="default">
+          Buttun
+        </Button>
+        <Button variant="filled" brand="success">
+          Buttun
+        </Button>{" "}
+        <Button variant="outline" brand="success">
+          Buttun
+        </Button>{" "}
+        <Button variant="subtle" brand="success">
+          Buttun
+        </Button>
+      </InnerWrap>
+      <InnerWrap>
+        <Button variant="filled" brand="danger">
+          Buttun
+        </Button>{" "}
+        <Button variant="outline" brand="danger">
+          Buttun
+        </Button>{" "}
+        <Button variant="subtle" brand="danger">
+          Buttun
+        </Button>
+        <Button variant="filled" brand="warning">
+          Buttun
+        </Button>{" "}
+        <Button variant="outline" brand="warning">
+          Buttun
+        </Button>{" "}
+        <Button variant="subtle" brand="warning">
+          Buttun
+        </Button>
+      </InnerWrap>
+
+      <InnerWrap>
+        <Button variant="filled" brand="info">
+          Buttun
+        </Button>{" "}
+        <Button variant="outline" brand="info">
+          Buttun
+        </Button>{" "}
+        <Button variant="subtle" brand="info">
           Buttun
         </Button>
-        <Button variant="outline">Buttun</Button>
-        <Button variant="subtle">Buttun</Button>
       </InnerWrap>
     </OuterWrap>
   );