import { Button } from '@cozmos-ui/button' ;
< Button sx = { { m : 1 } } > Button </ Button >
< Button sx = { { m : 1 } } variant = " secondary " > Button </ Button >
< Button sx = { { m : 1 } } variant = " accent " > Button </ Button >
< Button sx = { { m : 1 } } variant = " danger " > Button </ Button >
< Button sx = { { m : 1 } } > Button </ Button >
< Button sx = { { m : 1 } } priority = { 2 } > Button </ Button >
< Button sx = { { m : 1 } } priority = { 3 } > Button </ Button >
< br />
< Button sx = { { m : 1 } } variant = " secondary " > Button </ Button >
< Button sx = { { m : 1 } } priority = { 2 } variant = " secondary " > Button </ Button >
< Button sx = { { m : 1 } } priority = { 3 } variant = " secondary " > Button </ Button >
< br />
< Button sx = { { m : 1 } } variant = " accent " > Button </ Button >
< Button sx = { { m : 1 } } priority = { 2 } variant = " accent " > Button </ Button >
< Button sx = { { m : 1 } } priority = { 3 } variant = " accent " > Button </ Button >
< Button sx = { { m : 1 } } size = " sm " > Button </ Button >
< Button sx = { { m : 1 } } > Button </ Button >
< Button sx = { { m : 1 } } size = " lg " > Button </ Button >
< Button sx = { { m : 1 } } disabled > Button </ Button >
< Button sx = { { m : 1 } } disabled priority = { 2 } > Button </ Button >
< Button sx = { { m : 1 } } disabled priority = { 3 } > Button </ Button >
Name Type Required Default Description as elementType No 'button' The element or component used to replace the default.
E.g. `'a' | GatsbyLink | NextLink`.
Note: All remaining props will be passed through to the component. priority enum No 1 Creates a visual heirarchy with `1` being the most prominent size string No 'md' Modify `theme.buttons` to override default variants.
Default variants: `sm` | `md` | `lg` variant string No 'primary' Maps to `theme.colors`