docs: sizing guidelines for Button (#2013)

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no> Co-authored-by: Michael Marszalek <mimarz@gmail.com>
digdir · May 23, 2024 · 37827ba · 37827ba
1 parent 17f19f2
commit 37827ba
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/packages/react/src/components/Button/Button.mdx b/packages/react/src/components/Button/Button.mdx
@@ -69,6 +69,7 @@ Knappene kommer i to hovedfarger `first` og `second`. Hvis du har overstyrt farg
 
 ### Success
 
+**Denne fargen er deprecated, dvs den kommer til å bli fjernet så vi anbefaler å ikke bruke den**
 `Success`-fargen bruker vi bare når brukeren fullfører en prosess.
 
 <Canvas of={ButtonStories.Success} />
@@ -109,18 +110,30 @@ Som regel er det **venstre** som er den beste plasseringen, men det finnes unnta
 - Er det en knapp som sier “Start” med en høyrepekende pil, er det naturlig at pilen plasseres til høyre for teksten.
 - Er knappen fast plassert på høyre side av grensesnittet er det best at ikonet også er høyrestilt for teksten.
 
+<br />
+
 ### Størrelse på ikon
 
 Når du bruker ikon må du sette størrelsen på ikonet selv. Vi anbefaler å bruke disse størrelsene for [Aksel](https://aksel.nav.no/ikoner) sine ikoner:
 
-| Størrelse på Button | Aksel Ikon `fontSize` |
-| :------------------ | :-------------------- |
-| sm                  | 1rem                  |
-| md                  | 1.5rem                |
-| lg                  | 2rem                  |
+| Størrelse på knapp | Aksels ikon `fontSize` |
+| :----------------- | :--------------------- |
+| sm                 | 1rem                   |
+| md                 | 1.5rem                 |
+| lg                 | 2rem                   |
 
 <Canvas of={ButtonStories.Ikoner} />
 
+For knapper med kun ikon anbefaler vi å bruke større ikon:
+
+| Størrelse på knapp | Aksels ikon `fontSize` |
+| :----------------- | :--------------------- |
+| sm                 | 1.5rem                 |
+| md                 | 2rem                   |
+| lg                 | 2.5rem                 |
+
+<Canvas of={ButtonStories.Kunikoner} />
+
 <br />
 
 ### Full bredde

diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
@@ -374,23 +374,51 @@ export const Ikoner: StoryFn<typeof Button> = () => (
       size='sm'
     >
       <CogIcon fontSize='1rem' />
-      small
+      Small
     </Button>
     <Button
       variant='primary'
       size='md'
     >
       <CogIcon fontSize='1.5rem' />
-      medium
+      Medium
     </Button>
     <Button
       variant='primary'
       size='lg'
     >
       <CogIcon fontSize='2rem' />
-      large
+      Large
     </Button>
   </>
 );
 
 Ikoner.decorators = [stack];
+
+export const Kunikoner: StoryFn<typeof Button> = () => (
+  <>
+    <Button
+      icon={true}
+      variant='primary'
+      size='sm'
+    >
+      <CogIcon fontSize='1.5rem' />
+    </Button>
+    <Button
+      icon={true}
+      variant='primary'
+      size='md'
+    >
+      <CogIcon fontSize='2rem' />
+    </Button>
+    <Button
+      icon={true}
+      variant='primary'
+      size='lg'
+    >
+      <CogIcon fontSize='2.5rem' />
+    </Button>
+  </>
+);
+
+Kunikoner.decorators = [stack];