4-types-dynamic-Rounded-Buttons

[Rajalakshmi-Sudhakar]

I have created 4 different button components that can be used anywhere in our app.
To use it we will have to optionally specify the color, size, label, extra classNames, onCLick events, based on our requirement.
As per the Figma designs, buttons can be made use in the following sizes and colors.
SIZES:
xs, sm, md, lg

COLORS:
default, primary, secondary, accent, neutral, ghost, link, success, warning, error

4 Button types designed:

TYPE 1: Rounded Capsule Buttons with filled background color, label, and two heart icons
SUPPORTS: All sizes and all colors
EXAMPLE:

TYPE 2: Circle Buttons with filled background color, one heart icon.
SUPPORTS: All sizes and colors except Link
EXAMPLE:

TYPE 3: Rounded Capsule Buttons with white background color, label and two heart icons.
SUPPORTS: All sizes and colors except Neutral, Ghost, Link.
EXAMPLE:

TYPE 4: Circle Buttons with white background Color and one heart icon.
SUPPORTS: All sizes and colors except Neutral, Ghost, Link
EXAMPLE:

[Rajalakshmi-Sudhakar]

NOT Sure why the description here is formatted differently on Submit.
The Examples are missing as well.
Just adding it here for reference:

<CapsuleButton label="Button" size="xs" color="default" /> <RoundButton size="xs" color="default" /> <CapsuleButtonPlainBG label="Button" size="xs" color="default" /> <RoundButtonPlainBG size="xs" color="default" />