feat(Button): New variants and minor fixes (#938)

digdir · Oct 16, 2023 · bc7a052 · bc7a052
1 parent ee4f4d3
commit bc7a052
Show file tree

Hide file tree

Showing 7 changed files with 295 additions and 218 deletions.
diff --git a/packages/Overview.mdx b/packages/Overview.mdx
@@ -18,7 +18,7 @@ V1 er klar når følgende komponenter er markert som "✅ Felles":
 | [Accordion](/docs/felles-accordion--docs)         | ✅ Felles        | [Figma - Accordion](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=13134%3A99489&t=q8n4mcOmllKbfppi-1)                          | [Github - Accordion](https://github.com/digdir/designsystem/issues/75)      |
 | [Alert](/docs/felles-alert--docs)                 | ✅ Felles        | [Figma - Alert](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6801%3A29775&t=q8n4mcOmllKbfppi-1)                               | [Github - Alert](https://github.com/digdir/designsystem/issues/78)          |
 | Autocomplete                                      | 🚸 Ikke påbegynt | Figma - Autocomplete                                                                                                                                          | [Github - Autocomplete](https://github.com/digdir/designsystem/issues/525)  |
-| [Button](/docs/altinn-button--docs)               | 🔵 Altinn        | [Figma - Button](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=16157%3A48501&mode=design&t=qezsXvNE3xBWJlKj-1)     | [Github - Button](https://github.com/digdir/designsystem/issues/315)        |
+| [Button](/docs/felles-button--docs)               | ✅ Felles        | [Figma - Button](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?type=design&node-id=16157%3A48501&mode=design&t=qezsXvNE3xBWJlKj-1)     | [Github - Button](https://github.com/digdir/designsystem/issues/315)        |
 | [Checkbox](/docs/felles-checkbox--docs)           | ✅ Felles        | [Figma - Checkbox](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=6632%3A21157&t=q8n4mcOmllKbfppi-1)                            | [Github - Checkbox](https://github.com/digdir/designsystem/issues/316)      |
 | Card                                              | 🚸 Ikke påbegynt | Figma - Card                                                                                                                                                  | [Github - Card](https://github.com/digdir/designsystem/issues/317)          |
 | [Chip](/docs/felles-chip--docs)                   | ✅ Felles        | [Figma - Chip](https://www.figma.com/file/vpM9dqqQPHqU6ogfKp5tlr/Felles-komponenter?node-id=7882%3A46679&t=q8n4mcOmllKbfppi-1)                                | [Github - Chip](https://github.com/digdir/designsystem/issues/49)           |

diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
@@ -6,26 +6,31 @@ import * as ButtonStories from './Button.stories';
 
 # Button
 
-<Information text='altinn' />
-
 Button lar brukeren utføre en handling.
 
+## Props
+
+<Primary />
+<Controls />
+
 ## Bruk
 
+<Information text='token' />
+
 ```tsx
+import '@digdir/design-system-tokens/brand/altinn/tokens.css'; // Importeres kun en gang i appen din.
 import { Button } from '@digdir/design-system-react';
 
 <Button>Trykk på meg!</Button>;
 ```
 
-## Props
+## Eksempler
 
-<Primary />
-<Controls />
+### Lenke
 
-<Information text='token' />
+Sett `as="a"` dersom du trenger å bruke knappen som en lenke. Vurder først om det ikke holder å bruke [Link](/docs/felles-link--docs) komponenten.
 
-## Varianter
+<Canvas of={ButtonStories.UsedAsLink} />
 
 ### Knapp med tekst