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:

• Telicon

• Loader

Live Demo

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

React

General Components / Button - Basic Button ⋅ Storybooksipster-react-component-storybook.netlify.app