diff options
Diffstat (limited to 'src/view/screens/Storybook/Buttons.tsx')
-rw-r--r-- | src/view/screens/Storybook/Buttons.tsx | 131 |
1 files changed, 82 insertions, 49 deletions
diff --git a/src/view/screens/Storybook/Buttons.tsx b/src/view/screens/Storybook/Buttons.tsx index 2935103df..66040c2e3 100644 --- a/src/view/screens/Storybook/Buttons.tsx +++ b/src/view/screens/Storybook/Buttons.tsx @@ -9,7 +9,6 @@ import { ButtonText, ButtonVariant, } from '#/components/Button' -import {ArrowTopRight_Stroke2_Corner0_Rounded as ArrowTopRight} from '#/components/icons/Arrow' import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe' import {H1} from '#/components/Typography' @@ -70,81 +69,115 @@ export function Buttons() { ), )} </View> - {/* - <View style={[a.gap_md, a.align_start]}> - {['gradient_sunset', 'gradient_nordic', 'gradient_bonfire'].map( - name => ( - <React.Fragment key={name}> - <Button - variant="gradient" - color={name as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - <Button - disabled - variant="gradient" - color={name as ButtonColor} - size="large" - label="Click here"> - <ButtonText>Button</ButtonText> - </Button> - </React.Fragment> - ), - )} - </View> - */} </View> </View> <View style={[a.flex_wrap, a.gap_md, a.align_start]}> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonIcon icon={Globe} position="left" /> + <ButtonText>Button</ButtonText> + </Button> + </View> + + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> + <Button variant="solid" color="primary" size="large" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" size="lg" /> + </Button> <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" + size="large" + shape="round" + label="Link out"> + <ButtonIcon icon={ChevronLeft} /> + </Button> + <Button + variant="solid" + color="primary" size="large" + shape="round" label="Link out"> - <ButtonText>Link out</ButtonText> - <ButtonIcon icon={ArrowTopRight} position="right" /> + <ButtonIcon icon={ChevronLeft} size="lg" /> </Button> + </View> + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="small" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="small" + shape="round" label="Link out"> - <ButtonText>Link out</ButtonText> - <ButtonIcon icon={ArrowTopRight} position="right" /> + <ButtonIcon icon={ChevronLeft} /> </Button> - <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="small" + shape="round" label="Link out"> - <ButtonText>Link xxxxxx</ButtonText> + <ButtonIcon icon={ChevronLeft} size="lg" /> </Button> + </View> + <View style={[a.flex_row, a.gap_md, a.align_center]}> + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonText>Button</ButtonText> + </Button> + <Button variant="solid" color="primary" size="tiny" label="Link out"> + <ButtonText>Button</ButtonText> + <ButtonIcon icon={Globe} position="right" /> + </Button> <Button - variant="gradient" - color="gradient_sky" - size="small" + variant="solid" + color="primary" + size="tiny" + shape="round" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Link out</ButtonText> + <ButtonIcon icon={ChevronLeft} /> </Button> - <Button - variant="gradient" - color="gradient_sky" + variant="solid" + color="primary" size="tiny" + shape="round" label="Link out"> - <ButtonIcon icon={Globe} position="left" /> - <ButtonText>Link out</ButtonText> + <ButtonIcon icon={ChevronLeft} size="md" /> </Button> </View> - <View style={[a.flex_row, a.gap_md, a.align_start]}> + <View style={[a.flex_row, a.gap_md, a.align_center]}> <Button variant="solid" color="primary" |