Simple Button

Here is a simple guide on how to use the SButton component, and it’s different props.

Calling the component

This component accepts a children prop of type string, which is the text that will be displayed on the button.

import { SButton } from 'simple-material-ui-library'
<SButton size="small">I'm a button</SButton>
<SButton size="medium">I'm a button</SButton>
<SButton size="large">I'm a button</SButton>

Props

Variants

The default value is outlined

<SButton variant="outlined">outlined</SButton>

<SButton variant="contained">contained</SButton>

<SButton variant="text">text</SButton>

Size

The default value is medium

<SButton size="small">Small</SButton>

<SButton size="medium">Medium</SButton>

<SButton size="large">Large</SButton>

Background Color

The default value is blue

blue
red

<SButton variant="contained" >Blue</SButton>

<SButton variant="contained" backgroundColor="red">Red</SButton>

Rounded

The default value is true

true
false

<SButton rounded>Rounded</SButton>

<SButton rounded={false}>Not Rounded</SButton>

Disabled

The default value is false

true
false

<SButton disabled>Disabled</SButton>

<SButton disabled={false}>Not Disabled</SButton>

FontColor

The default value is white

white
blue

<SButton fontColor="white">White</SButton>

<SButton fontColor="blue">blue</SButton>

BorderColor

The default value is blue

blue
red

<SButton borderColor="blue">Blue</SButton>

<SButton borderColor="red">Red</SButton>

OnClick Function

<SButton onClick={() => alert("Hello")}>Click Me</SButton>