...
 
Commits (2)
......@@ -25,6 +25,7 @@ const StyledColorableShape = styled(Colorable)`
line-height: 1.5em;
box-shadow: none;
user-select: none;
cursor: unset;
transition: transform 0.2s ${themeGet('transitions.main')};
text-transform: lowercase;
......
......@@ -39,25 +39,16 @@ export const ButtonDefault = () => (
)
export const ButtonSizing = () => (
<Center spaced bordered>
<Center column spaced bordered background>
width
<Button width="400px"> width = 400px </Button>
<Button width="200px"> width = 200px </Button>
<Button width="12em"> width = 12em </Button>
<Button width="20em"> width = 20em </Button>
<Button width="20em">
width = 20em with alot of text to show how the <i>width</i> prop
influences the final width
</Button>
</Center>
<Center column spaced bordered background>
size
<Button size={1}> size = 1 </Button>
<Button size={2}> size = 2 </Button>
<Button size={3}> size = 3 </Button>
<Button size={4}> size = 4 </Button>
</Center>
<Center column spaced bordered background>
width
<Button width="400px"> width = 400px </Button>
<Button width="200px"> width = 200px </Button>
<Button width="12em"> width = 12em </Button>
<Button width="20em"> width = 20em </Button>
<Button width="20em">
width = 20em with alot of text to show how the <i>width</i> prop
influences the final width
</Button>
</Center>
)
......@@ -77,3 +68,15 @@ export const ButtonStates = () => (
ButtonStates.story = {
name: 'Button/states',
}
export const NavButton = () => (
<Center column spaced>
<a href="https://linguala.com/">
<Button>Click me</Button>
</a>
</Center>
)
NavButton.story = {
name: 'Button/nav',
}
This diff is collapsed.