Code

Props

Props
Required

children

string

​✅

className

string

type

string

(Base, Primary, Secondary, Ghost, Danger, DangerAlt).

size

string

(Default, Small, Large)

icon

string

iconPosition

string

(Left, Right)

loader

boolean

disabled

boolean

select

boolean

submit

boolean

onClick

function

customData

string, number or boolean

Select prop should only be used when developers are inserting a Button inside a Button Group Component.

customData

This is a prop to facilitate the developer's ability to set a custom attribute in the Button component. This data can easily be accessed by using the onClick event e.target.getAttributte('custom-data').

loader

Loader state can be use to indicate into a button that a response is taking some time to return a response. This might be useful in forms or section where we cannot change to a new view but we want to give a visual hint to the users that an operation is in process.

Something else to keep in midn, is that the loading icon position is going to be based on the iconPosition prop. In the case the iconPosition is not defined, it will take by default left side position.

Because we are in a loading state, the onClick action is not going to be active, like when we are passing the disabled prop to the button.

onClick

onClick event simulates a native click event, giving a developer the option of executing a custom function and having access to the event parameter, like in the following example:

const customAction = (e)=>{
    console.log(e.target.classname);
}

return(
    <div>
        ...
        <Button content='Example' type='Primary' onClick={customAction} />
        ...
    </div>
)

Components Dependency

For this component elaboration, the following internal components were used:

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Last updated