Preview:
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>
)
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