[RFC] Button Component

[govindsingh55]

INTRODUCTION

Button component based on the Chakra Button component.

The Goal:

Create <Button />,<Button.Link />

Export:

Component Parts

• Button: Base component using Chakra Button Component.
• Button.Primary: Button.Primary a button variant.
• Button.Secodary: Button.Secodary a button variant.
• Button.Solid: Button.Solid a button variant.
• Button.Outline: Button.Outline a button variant.
• Button.Ghost: Button.Ghost a button variant.
• Button.Link: Button.Link variant for links styled as a button.

Props

• onClick
• isDisabled
• isLoading
• loadingText
• leftIcon
• rightIcon
• variant
• size
• href
• target
• leftLoadingIcon
• rightLoadingIcon
• loadingIconSpace

[prasanna1211]

Needs more description: Please look into what else can be added from here: https://github.com/timelessco/chakra-components/issues/16

[prasanna1211]

Few things that can be thought of

1. Pre or post icon in button
2. Pre (or) post preloader
3. Full width buttons
4. Primary and secondary buttons

And there should be a few other things that can be taken from chakra.

[navin-moorthy]

For dot notation, get the inspiration from Ant Button Design. Convert their type into our dot notation.

[prasanna1211]

1. Varient is spelled wrongly
2. I guess it is better to have dot notation for primary, secondary, outline and fullWidth.
3. Button sometimes act as links. That time it should have a tag and have href to the link url. On clicking it should open in new tab / window.

Who can start on button component ?

[govindsingh55]

I started.

[prasanna1211]

Clear about the props ?

[govindsingh55]

working on dot notation

[prasanna1211]

Finalize props on RFC before you start working please.

[govindsingh55]

dot notation should be for varient or primary, secodary ?