interface Props { isFixed?: boolean } interface Attrs { type?: string } const Button = styled.button.attrs(({ type = 'button' }: Attrs) => ({ type, }))` position: ${({ isFixed = false }: Props) => (isFixed ? 'fixed' : 'absolute')}; ` export default () => ( <div> <Button isFixed={true} type="submit"> I'm a button with type "submit" instead of default type of "button" </Button> </div> )
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter