feat(docs): copy svg icon to clipboard

.changeset/cool-deers-joke.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+feat(docs): copy SVG icon to clipboard

.changeset/happy-peaches-arrive.md

@@ -0,0 +1,6 @@
+---
+'docs': patch
+'@marigold/components': patch
+---
+
+feat(comp): remove span from button and add some styles to the button element, add space prop to button

docs/content/components/button.mdx

@@ -19,6 +19,7 @@ The style variant and size of the button can be added with the variant prop and
 | `variant` (optional)  | `primary`, `secondary`, `ghost`, `text` | `primary` |
 | `size` (optional)     | `small`, `large`                        | `large`   |
 | `disabled` (optional) | boolean                                 |           |
+| `space` (optional)    | `ResponsiveStyleValue<string>`          | `none`    |
 
 ## Import
 
@@ -136,20 +137,20 @@ They can be used in a similar way of a secondary button, but they are meant to b
 Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.
 
 ```tsx
-<Button>
+<Button space="xxsmall">
   <Ticket /> Icon Primary
 </Button>
 ```
 
 ```tsx
-<Button disabled>
+<Button space="xxsmall" disabled>
   <Ticket /> Icon Primary
 </Button>
 ```
 
 ### Small Buttons
 
-If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be onpen on mobile devices.
+If there are many actions in one page, is it possible to use small buttons instead of big ones. As well if the page is required to be open on mobile devices.
 
 ```tsx
 <Button size="small">Primary</Button>
@@ -202,25 +203,25 @@ If there are many actions in one page, is it possible to use small buttons inste
 Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.Icons can be added in Order to make clearer what a button does. Buttons should not be made only with icons, because every user may understand them on a different way.
 
 ```tsx
-<Button size="small">
+<Button size="small" space="xxsmall">
   <Ticket /> Primary
 </Button>
 ```
 
 ```tsx
-<Button variant="secondary" size="small">
+<Button variant="secondary" size="small" space="xxsmall">
   <Direction /> Secondary
 </Button>
 ```
 
 ```tsx
-<Button variant="ghost" size="small">
+<Button variant="ghost" size="small" space="xxsmall">
   <CircleUnchecked /> Ghost
 </Button>
 ```
 
 ```tsx
-<Button variant="text" size="small">
+<Button variant="text" size="small" space="xxsmall">
   <FormatSize /> Text Only
 </Button>
 ```

docs/content/components/icon.mdx

@@ -0,0 +1,64 @@
+---
+title: Icon
+---
+
+# Icon
+
+## Installation
+
+### 1. React Icon component:
+
+Marigold Icons have a seperate package to install.
+The first option is to install the package and use the Icons like other React components and as in the code example below.
+You have to specify the name of the icon directly between the `< />` brackets.
+
+```bash onlyCode
+# with npm
+npm install @marigold/icons --save
+
+# with yarn
+yarn add @marigold/icons
+```
+
+### 2. HTML SVG Element
+
+The second option is to go to [Marigold Icons](../../foundation/icons) and click on an Icon in the list to copy them as `<svg>` Element
+
+## Description
+
+With the Icon component you can render one of the [Marigold Icons](../../foundation/icons).
+By adding the `size` prop you can change to another size. `24` is the default size.
+The `fill` prop is the second attribute and per default `currentcolor`.
+
+## Properties
+
+| Property | Type     | Default          |
+| :------- | :------- | :--------------- |
+| `size`   | `number` | `24`             |
+| `fill`   | `string` | `'currentcolor'` |
+
+## Import
+
+```tsx onlyCode
+import { DesignTicket } from '@marigold/icons';
+```
+
+## Live-Code Example
+
+```tsx expandCode
+<DesignTicket />
+```
+
+## Usage
+
+### size prop
+
+```tsx
+<DesignTicket size={40} />
+```
+
+### fill prop
+
+```tsx
+<DesignTicket fill="red" />
+```

docs/content/components/inline.mdx

@@ -13,7 +13,7 @@ Layout component to inline elements with space. This component uses the spaces f
 | Property | Type                           | Default  |
 | :------- | :----------------------------- | :------- |
 | `space`  | `ResponsiveStyleValue<string>` | `none`   |
-| `align`  | `left, right, center`          | `center` |
+| `align`  | `center, top, bottom`          | `center` |
 
 ## Import