1 files changed, 85 insertions, 4 deletions
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx
index fbdc84eb4..320db13ff 100644
--- a/src/view/screens/Storybook/Buttons.tsx
+++ b/src/view/screens/Storybook/Buttons.tsx
@@ -11,6 +11,7 @@ import {
 } from '#/components/Button'
 import {H1} from '#/components/Typography'
 import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/ArrowTopRight'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 
 export function Buttons() {
@@ -91,14 +92,16 @@ export function Buttons() {
             )}
           </View>
         </View>
+      </View>
 
+      <View style={[a.flex_wrap, a.gap_md, a.align_start]}>
         <Button
           variant="gradient"
           color="gradient_sky"
           size="large"
           label="Link out">
           <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} />
+          <ButtonIcon icon={ArrowTopRight} position="right" />
         </Button>
 
         <Button
@@ -107,7 +110,15 @@ export function Buttons() {
           size="small"
           label="Link out">
           <ButtonText>Link out</ButtonText>
-          <ButtonIcon icon={ArrowTopRight} />
+          <ButtonIcon icon={ArrowTopRight} position="right" />
+        </Button>
+
+        <Button
+          variant="gradient"
+          color="gradient_sky"
+          size="small"
+          label="Link out">
+          <ButtonText>Link xxxxxx</ButtonText>
         </Button>
 
         <Button
@@ -115,8 +126,78 @@ export function Buttons() {
           color="gradient_sky"
           size="small"
           label="Link out">
-          <ButtonIcon icon={Globe} />
-          <ButtonText>See the world</ButtonText>
+          <ButtonIcon icon={Globe} position="left" />
+          <ButtonText>Link out</ButtonText>
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.gap_md, a.align_start]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="large"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="gradient"
+          color="gradient_sunset"
+          size="small"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="outline"
+          color="primary"
+          size="large"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="ghost"
+          color="primary"
+          size="small"
+          shape="round"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.gap_md, a.align_start]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="large"
+          shape="square"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="gradient"
+          color="gradient_sunset"
+          size="small"
+          shape="square"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="outline"
+          color="primary"
+          size="large"
+          shape="square"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+        <Button
+          variant="ghost"
+          color="primary"
+          size="small"
+          shape="square"
+          label="Link out">
+          <ButtonIcon icon={ChevronLeft} />
         </Button>
       </View>
     </View>