Button

> Atom Element: SUI button



Installation

``sh
$ npm install @s-ui/react-atom-button --save
`

Usage

$3

`js
import Button from '@s-ui/react-atom-button'

return (


`js
import Button from '@s-ui/react-atom-button'

return (


You could use the AtomButton along the AtomIcon in order to show the button text with an icon. The proper size and color of the AtomIcon will be used according to the needs of the AtomButton definition.

`js
import Button from '@s-ui/react-atom-button'
import AtomIcon from '@s-ui/react-atom-icon'

const Icon = (





)

return (


Use shape prop to modify the border radius of the component. Choose between: squared, rounded and circular

`js
import Button, {atomButtonShapes} from '@s-ui/react-atom-button'

return (
<>




)
`

$3

Set isLoading prop to display the loading state of a button. Optionally, use loader prop if you want to overwrite the default spinner and loadingText prop if you want to display some text next to the loader.

`js
import Button from '@s-ui/react-atom-button'

return (
<>



)
`

$3

Set elevation prop to display a shadow around the button. If it's not set no shadow will be shown.

`js
import Button from '@s-ui/react-atom-button'
return (
<>
Example
Example

)
`

$3

By default AtomButton inside a form will submit the form

`js
import Button from '@s-ui/react-atom-button'

return (


If we need several AtomButton inside a form we can specify which one we want to submit the form w/ props isButton and isSubmit

`js
import Button from '@s-ui/react-atom-button'

return (


When link property is passed, the component will render an html link.

`js
import Button from '@s-ui/react-atom-button'

return (

Link

)
`

output:

`html
Link
``

> Find full description and more examples in the demo page.