@miljodirektoratet/md-css 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miljodirektoratet/md-css",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "CSS for Miljødirektoratet",
   "author": "Miljødirektoratet",
   "main": "./src/index.css",

package/src/button/README.md

@@ -2,14 +2,22 @@
 
 To use the `Button` css in `@miljodirektoratet/md-css` as a standalone, without the accompanying React component, please use the following HTML structure.
 
-Class names in brackets [] are optional-/togglable-/decorator- or state dependant classes.
+Class names and elements in brackets [] are optional-/togglable-/decorator- or state dependant classes.
 
 See [Storybook](https://miljodir.github.io/md-components) for examples and more info.
 
 ```html
-<button className="md-button [md-button--small, md-button--secondary, md-button--danger]">
-  <div className="md-button__leftIcon">{leftIcon}</div>
-  BUTTON TEXT
-  <div className="md-button__rightIcon">{rightIcon}</div>
+<button className="md-button [md-button--small, md-button--secondary, md-button--danger, md-button--column]">
+  [
+  <div className="md-button__topIcon">{topIcon}</div>
+  ] [
+  <div className="md-button__content">
+    ]
+    <div className="md-button__leftIcon">{leftIcon}</div>
+    BUTTON TEXT
+    <div className="md-button__rightIcon">{rightIcon}</div>
+    [
+  </div>
+  ]
 </button>
 ```

package/src/button/button.css

@@ -11,11 +11,28 @@
   border: none;
 }
 
+.md-button--column {
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.md-button__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .md-button--small {
   padding: 0.4rem 0.8rem;
   border-radius: 0.43rem;
 }
 
+.md-button__topIcon {
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+}
+
 .md-button__leftIcon {
   height: 1rem;
   width: 1rem;