The Button component provided from the styleguide located in sfpy/styleguide provides a fully featured button component.
import React, { useEffect } from 'react';
import { Button } from '@sfpy/styleguide'
export default function App() {
return (
<div style={styles.container}>
<p>Button Example</p>
<Button
size="lg"
theme="primary"
leftSlot={<PaletteIcon />}
disabled={false}
onClick={() => console.log("button clicked")}
>
I am a clickable button
</Button>
</div>
);
}
| Prop Name | Type | Default | Description |
|---|---|---|---|
| theme | enum | primary | The following themes are available: primary, secondary, primary-destructive, secondary-destructive, tertiary, quaternary |
| className | string | undefined | Additional classnames in tailwind format to style the button |
| disabled | boolean | false | Render the button as disabled |
| size | enum | sm | The following sizes are available: xs, sm, md, lg, xl, 2xl |
| leftSlot | React.ReactElement | undefined | Used to render a React component on the left of the button. Usually used to render Icon adornments. |
| rightSlot | React.ReactElement | undefined | Same as leftSlot but added to the right of the Button |
| href | string | undefined | If href is supplied, the button behaves as a Link which will redirect to the provided href when clicked |
| openInNewTab | boolean | false | Used in conjunction with href. Will open the href in a new tab. Similar to target=_blank on <a> tags |