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