npm - spoko-design-system - Versions diffs - 0.8.0 → 0.8.1 - Mend

spoko-design-system 0.8.0 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (167) hide show

package/.github/dependabot.yml +11 -11
package/.github/todo.yml +3 -3
package/.github/workflows/deploy.yml +39 -39
package/.stackblitzrc +5 -5
package/.vscode/extensions.json +5 -5
package/.vscode/launch.json +11 -11
package/.vscode/settings.json +5 -5
package/LICENSE +21 -21
package/README.md +114 -114
package/astro-i18next.config.mjs +17 -17
package/astro-i18next.config.ts +10 -10
package/astro.config.mjs +86 -86
package/dev-dist/sw.js +91 -91
package/dev-dist/workbox-c676b6d3.js +3391 -3391
package/icon.config.ts +309 -309
package/index.ts +66 -66
package/package.json +22 -22
package/public/fonts/lg.svg +53 -53
package/public/fonts/vwhead-bold-demo.html +549 -549
package/public/fonts/vwhead-regular-demo.html +549 -549
package/public/fonts/vwtext-bold-demo.html +549 -549
package/public/fonts/vwtext-regular-demo.html +549 -549
package/public/github.svg +3 -3
package/public/grid_dot.svg +4 -4
package/public/linkedin.svg +44 -44
package/public/locales/en/translation.json +8 -8
package/public/locales/pl/translation.json +8 -8
package/public/make-scrollable-code-focusable.js +3 -3
package/public/pagefind.yml +3 -3
package/public/polo.blue.svg +29 -29
package/public/spoko.space.svg +71 -71
package/public/twitter.svg +46 -46
package/renovate.json +6 -6
package/sandbox.config.json +11 -11
package/src/MyComponent.astro +8 -8
package/src/components/Badge.vue +19 -19
package/src/components/Badges.vue +21 -21
package/src/components/Breadcrumbs.vue +91 -91
package/src/components/Button.vue +101 -101
package/src/components/ButtonCopy.astro +183 -183
package/src/components/ButtonCopy.vue +36 -36
package/src/components/Card.astro +27 -27
package/src/components/Carousel.astro +26 -26
package/src/components/Category/CategoriesCarousel.astro +101 -101
package/src/components/Category/CategoryDetails.astro +169 -169
package/src/components/Category/CategoryLink.vue +28 -28
package/src/components/Category/CategorySidebarToggler.vue +9 -9
package/src/components/Category/CategoryTile.astro +37 -37
package/src/components/Category/CategoryViewToggler.astro +89 -89
package/src/components/Category/SubCategoryLink.vue +19 -19
package/src/components/Copyright.astro +12 -12
package/src/components/Date.astro +7 -7
package/src/components/Faq.astro +33 -33
package/src/components/FaqItem.astro +80 -80
package/src/components/FeaturesList.vue +37 -37
package/src/components/FuckRussia.vue +62 -62
package/src/components/HandDrive.astro +29 -29
package/src/components/Header/Header.astro +210 -210
package/src/components/Header/SkipToContent.astro +1 -1
package/src/components/Headline.vue +48 -48
package/src/components/Image.astro +30 -30
package/src/components/LeftSidebar.astro +53 -53
package/src/components/MainColors.vue +22 -22
package/src/components/MainInput.vue +15 -15
package/src/components/Modal.astro +27 -27
package/src/components/PageContent.astro +5 -5
package/src/components/PartNumber.vue +27 -27
package/src/components/Post/PostCategories.astro +41 -41
package/src/components/Post/PostCategories.vue +30 -30
package/src/components/PostHeader.astro +103 -103
package/src/components/PrCode.vue +141 -141
package/src/components/Product/ProductButton.vue +18 -18
package/src/components/Product/ProductCarousel.astro +35 -35
package/src/components/Product/ProductEngineType.vue +42 -42
package/src/components/Product/ProductImage.astro +40 -40
package/src/components/Product/ProductLink.astro +101 -101
package/src/components/Product/ProductLink.vue +59 -59
package/src/components/Product/ProductLinkInfo.astro +37 -37
package/src/components/Product/ProductNumber.astro +60 -60
package/src/components/ProductCarousel.astro +38 -38
package/src/components/ProductCodes.vue +39 -39
package/src/components/ProductDetailName.vue +52 -52
package/src/components/ProductDetailsList.vue +197 -130
package/src/components/ProductTile.astro +48 -48
package/src/components/Quote.vue +23 -23
package/src/components/ReloadPrompt.astro +50 -50
package/src/components/SlimBanner.vue +72 -72
package/src/components/Table.vue +32 -32
package/src/components/TableOfContents.astro +15 -15
package/src/components/Translations.vue +23 -23
package/src/components/flags/FlagPL.vue +3 -3
package/src/components/flags/FlagUA.vue +2 -2
package/src/components/layout/Container.astro +7 -7
package/src/components/layout/Header.astro +80 -80
package/src/config.ts +56 -56
package/src/design.config.ts +98 -98
package/src/env.d.ts +6 -6
package/src/layouts/Layout.astro +61 -61
package/src/layouts/MainLayout.astro +81 -81
package/src/layouts/partials/FooterCommon.astro +4 -4
package/src/layouts/partials/HeadCommon.astro +44 -44
package/src/layouts/partials/HeadSEO.astro +41 -41
package/src/pages/components/badges.mdx +57 -57
package/src/pages/components/breadcrumbs.mdx +139 -139
package/src/pages/components/buttons.mdx +360 -360
package/src/pages/components/card.mdx +294 -294
package/src/pages/components/carousel.mdx +62 -62
package/src/pages/components/copyright.mdx +42 -42
package/src/pages/components/details-list.mdx +115 -115
package/src/pages/components/features-list.mdx +37 -37
package/src/pages/components/flags.mdx +49 -49
package/src/pages/components/fuck-russia.mdx +39 -39
package/src/pages/components/hand-drive.mdx +38 -38
package/src/pages/components/headline.mdx +152 -152
package/src/pages/components/icons.astro +135 -135
package/src/pages/components/image.mdx +513 -513
package/src/pages/components/input.mdx +367 -367
package/src/pages/components/jumbotron.mdx +359 -359
package/src/pages/components/modal.mdx +64 -64
package/src/pages/components/post-header.mdx +64 -64
package/src/pages/components/pr-code.mdx +65 -65
package/src/pages/components/product-number.mdx +58 -58
package/src/pages/components/product-tile.mdx +51 -51
package/src/pages/components/quote.mdx +33 -33
package/src/pages/components/slimbanner.mdx +35 -35
package/src/pages/components/table.mdx +108 -108
package/src/pages/core/colors.mdx +10 -10
package/src/pages/core/grid.mdx +89 -89
package/src/pages/core/introduction.mdx +77 -77
package/src/pages/core/shadows.astro +20 -20
package/src/pages/core/typography.astro +49 -49
package/src/pages/index.astro +133 -133
package/src/pages/patterns/introduction.mdx +60 -60
package/src/pwa.ts +12 -12
package/src/styles/_variables.scss +70 -70
package/src/styles/base/base.css +184 -184
package/src/styles/base/grid.css +92 -92
package/src/styles/base/typography.css +70 -70
package/src/styles/content.css +73 -73
package/src/styles/main.css +7 -7
package/src/types/Product.ts +31 -31
package/src/types/astro.d.ts +3 -3
package/src/utils/product/getPriceFormatted.ts +15 -15
package/src/utils/product/getProductChecklist.ts +17 -17
package/src/utils/product/useFormatProductNumber.ts +41 -41
package/src/utils/seo/getShorterDescription.ts +14 -14
package/src/utils/text/formatDate.ts +5 -5
package/src/utils/text/formatLocaleNumber.ts +6 -6
package/src/utils/text/formatPad.ts +12 -12
package/src/utils/text/getNumberFormatted.ts +33 -33
package/src/utils/text/getTranslatedLink.ts +5 -5
package/src/utils/text.ts +19 -19
package/tailwind.config.cjs +8 -8
package/tsconfig.json +28 -28
package/uno-config/index.ts +259 -259
package/uno-config/theme/breakpoints.ts +9 -9
package/uno-config/theme/colors.ts +64 -64
package/uno-config/theme/dimensions.ts +17 -17
package/uno-config/theme/effects.ts +14 -14
package/uno-config/theme/grid.ts +10 -10
package/uno-config/theme/index.ts +28 -28
package/uno-config/theme/shortcuts/buttons.ts +53 -53
package/uno-config/theme/shortcuts/components.ts +123 -123
package/uno-config/theme/shortcuts/index.ts +20 -20
package/uno-config/theme/shortcuts/layout.ts +64 -64
package/uno-config/theme/typography.ts +29 -29
package/uno.config.ts +2 -2

package/src/pages/components/buttons.mdx CHANGED Viewed

@@ -1,361 +1,361 @@
----
-title: "Buttons"
-layout: "../../layouts/MainLayout.astro"
----
-import Button from '../../components/Button.vue'
-import ButtonCopy from '../../components/ButtonCopy.astro'
-import { Icon } from 'astro-icon/components';
-import { t } from "i18next";
-# All buttons
-This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
-Find the code for this page in the `src/pages/components/buttons.md` file.
-<div class="component-preview flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary>Primary</Button>
-        <Button secondary>Secondary</Button>
-        <Button tertiary>Tertiary</Button>
-        <Button text medium>Text</Button>
-        <Button tag small>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary rounded>Primary</Button>
-        <Button secondary rounded>Secondary</Button>
-        <Button tertiary rounded>Tertiary</Button>
-        <Button text medium rounded>Text</Button>
-        <Button tag small rounded>Tag Name</Button>
-    </div>
-</div>
-```js
-<Button primary>Primary</Button>
-<Button secondary>Secondary</Button>
-<Button tertiary>Tertiary</Button>
-<Button text medium>Text</Button>
-<Button tag small>Tag Name</Button>
-<Button primary rounded>Primary</Button>
-<Button secondary rounded>Secondary</Button>
-<Button tertiary rounded>Tertiary</Button>
-<Button text medium rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-```
-## Primary button `<button>`
-We use the primary button for main actions like saving a form or creating a new item.
-<div class="component-preview">
-    <Button primary>Primary</Button>
-    <Button primary medium>Primary</Button>
-    <Button primary small>Primary</Button>
-</div>
-```js
-    <Button primary>Primary</Button>
-    <Button primary medium>Primary</Button>
-    <Button primary small>Primary</Button>
-```
-## Secondary button
-Secondary buttons accompany primary buttons to provide additional actions.
-For example, cancel buttons are secondary buttons.
-<div class="component-preview">
-    <Button secondary>Secondary</Button>
-    <Button secondary medium>Secondary</Button>
-    <Button secondary small>Secondary</Button>
-</div>
-```js
-    <Button secondary>Secondary</Button>
-    <Button secondary medium>Secondary</Button>
-    <Button secondary small>Secondary</Button>
-```
-## Text button
-Text buttons are used for actions that do not require a primary or secondary button.
-<div class="component-preview">
-    <Button text>Text button</Button>
-    <Button text>Text button</Button>
-    <Button text>Text button</Button>
-</div>
-```js
-<Button text>Text button</Button>
-```
-## Link tertiary
-<div class="component-preview">
-    <Button tertiary>Tertiary</Button>
-    <Button tertiary medium>Tertiary</Button>
-    <Button tertiary small>Tertiary</Button>
-</div>
-```html
-    <Button tertiary>Tertiary</Button>
-    <Button tertiary medium>Tertiary</Button>
-    <Button tertiary small>Tertiary</Button>
-```
-## Tertiary with icon
-<div class="component-preview">
-    <Button tertiary href="#">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-    <Button tertiary href="#" medium>
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-    <Button tertiary href="#" small class="px-5">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-</div>
-```html
-    <Button tertiary href="#">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-    <Button tertiary href="#" medium>
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-    <Button tertiary href="#" small class="px-5">
-        Read more
-        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
-    </Button>
-```
-## Rounded button
-Rounded edges
-<div class="component-preview flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary rounded>Primary</Button>
-        <Button secondary rounded>Secondary</Button>
-        <Button tertiary rounded>Tertiary</Button>
-        <Button text rounded>Text</Button>
-        <Button tag rounded>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary medium rounded>Primary</Button>
-        <Button secondary medium rounded>Secondary</Button>
-        <Button tertiary medium rounded>Tertiary</Button>
-        <Button text medium rounded>Text</Button>
-        <Button tag medium rounded>Tag Name</Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary small rounded>Primary</Button>
-        <Button secondary small rounded>Secondary</Button>
-        <Button tertiary small rounded>Tertiary</Button>
-        <Button text medium small rounded>Text</Button>
-        <Button tag small rounded>Tag Name</Button>
-    </div>
-</div>
-```js
-<Button primary rounded>Primary</Button>
-<Button secondary rounded>Secondary</Button>
-<Button tertiary rounded>Tertiary</Button>
-<Button text medium rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-<Button primary medium rounded>Primary</Button>
-<Button secondary medium rounded>Secondary</Button>
-<Button tertiary medium rounded>Tertiary</Button>
-<Button text medium medium rounded>Text</Button>
-<Button tag small medium rounded>Tag Name</Button>
-<Button primary small rounded>Primary</Button>
-<Button secondary small rounded>Secondary</Button>
-<Button tertiary small rounded>Tertiary</Button>
-<Button text medium small rounded>Text</Button>
-<Button tag small rounded>Tag Name</Button>
-```
-## Outline button
-Text buttons are used for actions that do not require a primary or secondary button.
-<div class="component-preview flex-wrap">
-    <Button primary-outline title="Title">Text button</Button>
-    <Button primary-outline rounded title="Title">Text button</Button>
-    <Button secondary-outline title="Title">Text button</Button>
-    <Button secondary-outline rounded title="Title">Text button</Button>
-    <Button tertiary-outline title="Title">Text button</Button>
-    <Button tertiary-outline rounded title="Title">Text button</Button>
-    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
-</div>
-```js
-    <Button primary-outline title="Title">Text button</Button>
-    <Button primary-outline rounded title="Title">Text button</Button>
-    <Button secondary-outline title="Title">Text button</Button>
-    <Button secondary-outline rounded title="Title">Text button</Button>
-    <Button tertiary-outline title="Title">Text button</Button>
-    <Button tertiary-outline rounded title="Title">Text button</Button>
-    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
-```
-### Outline button - custom hover
-<div class="component-preview">
-    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
-</div>
-```js
-    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
-    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
-```
-## Link button `<a>`
-Text buttons are used for actions that do not require a primary or secondary button.
-<div class="component-preview">
-    <Button primary href="#" title="Title">Text button</Button>
-</div>
-```js
-<Button primary href="#" title="Title">Text button</Button>
-```
-## Circle button
-Circle buttons are perfect for icon-only actions, maintaining equal width and height.
-<div class="component-preview flex-wrap">
-    <div class="flex w-full gap-4 items-center">
-        <Button primary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-        <Button secondary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-        <Button tertiary circle>
-            <Icon name="la:arrow-right" />
-        </Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-        <Button secondary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-        <Button tertiary medium circle>
-            <Icon name="la:arrow-right" class="text-xl" />
-        </Button>
-    </div>
-    <div class="flex w-full gap-4 items-center">
-        <Button primary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-        <Button secondary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-        <Button tertiary small circle>
-            <Icon name="la:arrow-right" class="text-lg" />
-        </Button>
-    </div>
-</div>
-```js
-<Button primary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-<Button secondary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-<Button tertiary circle>
-    <Icon name="la:arrow-right" />
-</Button>
-<Button primary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-<Button secondary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-<Button tertiary medium circle>
-    <Icon name="la:arrow-right" class="text-xl" />
-</Button>
-<Button primary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-<Button secondary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-<Button tertiary small circle>
-    <Icon name="la:arrow-right" class="text-lg" />
-</Button>
-```
-### Circle outline buttons
-Circle buttons are also available in outline variants.
-<div class="component-preview">
-    <Button primary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button secondary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button tertiary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-</div>
-```js
-    <Button primary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button secondary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
-    <Button tertiary-outline circle>
-        <Icon name="la:arrow-right" class="text-2xl" />
-    </Button>
+---
+title: "Buttons"
+layout: "../../layouts/MainLayout.astro"
+---
+import Button from '../../components/Button.vue'
+import ButtonCopy from '../../components/ButtonCopy.astro'
+import { Icon } from 'astro-icon/components';
+import { t } from "i18next";
+# All buttons
+This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
+Find the code for this page in the `src/pages/components/buttons.md` file.
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary>Primary</Button>
+        <Button secondary>Secondary</Button>
+        <Button tertiary>Tertiary</Button>
+        <Button text medium>Text</Button>
+        <Button tag small>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        <Button text medium rounded>Text</Button>
+        <Button tag small rounded>Tag Name</Button>
+    </div>
+</div>
+```js
+<Button primary>Primary</Button>
+<Button secondary>Secondary</Button>
+<Button tertiary>Tertiary</Button>
+<Button text medium>Text</Button>
+<Button tag small>Tag Name</Button>
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+```
+## Primary button `<button>`
+We use the primary button for main actions like saving a form or creating a new item.
+<div class="component-preview">
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
+</div>
+```js
+    <Button primary>Primary</Button>
+    <Button primary medium>Primary</Button>
+    <Button primary small>Primary</Button>
+```
+## Secondary button
+Secondary buttons accompany primary buttons to provide additional actions.
+For example, cancel buttons are secondary buttons.
+<div class="component-preview">
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
+</div>
+```js
+    <Button secondary>Secondary</Button>
+    <Button secondary medium>Secondary</Button>
+    <Button secondary small>Secondary</Button>
+```
+## Text button
+Text buttons are used for actions that do not require a primary or secondary button.
+<div class="component-preview">
+    <Button text>Text button</Button>
+    <Button text>Text button</Button>
+    <Button text>Text button</Button>
+</div>
+```js
+<Button text>Text button</Button>
+```
+## Link tertiary
+<div class="component-preview">
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+</div>
+```html
+    <Button tertiary>Tertiary</Button>
+    <Button tertiary medium>Tertiary</Button>
+    <Button tertiary small>Tertiary</Button>
+```
+## Tertiary with icon
+<div class="component-preview">
+    <Button tertiary href="#">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+</div>
+```html
+    <Button tertiary href="#">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+    <Button tertiary href="#" medium>
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+    <Button tertiary href="#" small class="px-5">
+        Read more
+        <Icon name="la:arrow-right" class="ml-2 text-2xl -my-1 -mr-1" />
+    </Button>
+```
+## Rounded button
+Rounded edges
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary rounded>Primary</Button>
+        <Button secondary rounded>Secondary</Button>
+        <Button tertiary rounded>Tertiary</Button>
+        <Button text rounded>Text</Button>
+        <Button tag rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium rounded>Primary</Button>
+        <Button secondary medium rounded>Secondary</Button>
+        <Button tertiary medium rounded>Tertiary</Button>
+        <Button text medium rounded>Text</Button>
+        <Button tag medium rounded>Tag Name</Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small rounded>Primary</Button>
+        <Button secondary small rounded>Secondary</Button>
+        <Button tertiary small rounded>Tertiary</Button>
+        <Button text medium small rounded>Text</Button>
+        <Button tag small rounded>Tag Name</Button>
+    </div>
+</div>
+```js
+<Button primary rounded>Primary</Button>
+<Button secondary rounded>Secondary</Button>
+<Button tertiary rounded>Tertiary</Button>
+<Button text medium rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+<Button primary medium rounded>Primary</Button>
+<Button secondary medium rounded>Secondary</Button>
+<Button tertiary medium rounded>Tertiary</Button>
+<Button text medium medium rounded>Text</Button>
+<Button tag small medium rounded>Tag Name</Button>
+<Button primary small rounded>Primary</Button>
+<Button secondary small rounded>Secondary</Button>
+<Button tertiary small rounded>Tertiary</Button>
+<Button text medium small rounded>Text</Button>
+<Button tag small rounded>Tag Name</Button>
+```
+## Outline button
+Text buttons are used for actions that do not require a primary or secondary button.
+<div class="component-preview flex-wrap">
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
+</div>
+```js
+    <Button primary-outline title="Title">Text button</Button>
+    <Button primary-outline rounded title="Title">Text button</Button>
+    <Button secondary-outline title="Title">Text button</Button>
+    <Button secondary-outline rounded title="Title">Text button</Button>
+    <Button tertiary-outline title="Title">Text button</Button>
+    <Button tertiary-outline rounded title="Title">Text button</Button>
+    <Button tertiary-outline title="Title" class="border-2">Text button</Button>
+```
+### Outline button - custom hover
+<div class="component-preview">
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+</div>
+```js
+    <Button tertiary-outline rounded light-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded medium-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded dark-hover title="Title">Text button</Button>
+    <Button tertiary-outline rounded white-hover title="Title">Text button</Button>
+```
+## Link button `<a>`
+Text buttons are used for actions that do not require a primary or secondary button.
+<div class="component-preview">
+    <Button primary href="#" title="Title">Text button</Button>
+</div>
+```js
+<Button primary href="#" title="Title">Text button</Button>
+```
+## Circle button
+Circle buttons are perfect for icon-only actions, maintaining equal width and height.
+<div class="component-preview flex-wrap">
+    <div class="flex w-full gap-4 items-center">
+        <Button primary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button secondary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+        <Button tertiary circle>
+            <Icon name="la:arrow-right" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button secondary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+        <Button tertiary medium circle>
+            <Icon name="la:arrow-right" class="text-xl" />
+        </Button>
+    </div>
+    <div class="flex w-full gap-4 items-center">
+        <Button primary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button secondary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+        <Button tertiary small circle>
+            <Icon name="la:arrow-right" class="text-lg" />
+        </Button>
+    </div>
+</div>
+```js
+<Button primary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button secondary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button tertiary circle>
+    <Icon name="la:arrow-right" />
+</Button>
+<Button primary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button secondary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button tertiary medium circle>
+    <Icon name="la:arrow-right" class="text-xl" />
+</Button>
+<Button primary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button secondary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+<Button tertiary small circle>
+    <Icon name="la:arrow-right" class="text-lg" />
+</Button>
+```
+### Circle outline buttons
+Circle buttons are also available in outline variants.
+<div class="component-preview">
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+</div>
+```js
+    <Button primary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button secondary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
+    <Button tertiary-outline circle>
+        <Icon name="la:arrow-right" class="text-2xl" />
+    </Button>
 ```