## Feature Examples ### Size - description:

Control the size of a button with the size prop:

Medium is the default size for general actions.

Small should be used for cards and widgets.

Tiny is for dense layouts.

- example: ```jsx Medium Small Tiny ``` ### Skin - description:

Control the appearance of a button with skin prop:

Standard is the default for general actions.

Destructive is for actions that have a destructive effect on user data, such as delete.

Standard-light is for main actions placed on dark backgrounds.

Light is for general actions placed on dark backgrounds.

Premium is used for actions that prompt users to upgrade their plans.

Dark is for a list of actions stacked in a single place, like quick links in the sidebar.

- example: ```jsx Standard Destructive Standard Light Light Premium Dark ; ``` ### Affix - description:

Add more context to actions with affix icons:

Emphasize the button action with a prefixIcon.

Indicate that an action will open a popover or navigate users to another page with a suffixIcon.

- example: ```jsx }> Prefix }> Suffix }> Prefix }> Suffix }> Prefix }> Suffix ; ``` ### Underline - description:

Control underline visibility with underline prop:

none is the default.

onHover shows an underline on mouse hover.

always shows an underline at all times. It is most suitable for text links.

- example: ```jsx None On Hover Always ; ``` ### Disabled - description:

To disable a button, use the disabled prop which indicates a button can't be selected.

- example: ```jsx Disabled ``` ### Text overflow - description:

Use an ellipsis prop for overflow text. The full text will be displayed when a user hovers over the button.

Note: Try to avoid lengthy action labels. CTA text should be short and clear – one to two words, or three max for specific use cases.

- example: ```jsx This label exceeds available space and is shown in a tooltip ; ``` ### Full width - description:

Set the button to fill 100% of its parent container width with the fluid prop. Use this setting for mobile designs only.

- example: ```jsx Full Width; ``` ## Developer Examples ### Custom HTML tag - description:

Render buttons as any given HTML tag with the as prop.

Render text buttons that are links as: