## 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
MediumSmallTiny;
```
### 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
StandardDestructiveStandard LightLightPremiumDark;
```
### 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
NoneOn HoverAlways;
```
### 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;
```
### Weight
- description: Control button boldness with `weight` prop. It supports three different weights, that are based on `` component.
- example:
```jsx
Bold
Normal
Thin
;
```
## Developer Examples
### Custom HTML tag
- description: Render buttons as any given HTML tag with the `as` prop. Render text buttons that are links as: - `` when attributes like href, target, etc., are needed. - `` when props like `to`, `replace`, etc. are needed. All attributes will be passed to the rendered HTML tag.
- example:
```jsx
() => {
const ReactRouterLink = (props) => ;
return (
{'Native tag'}
{'React Router tag'}
{'Native tag'}
);
};
```
## Common Use Case Examples
### Settings panel
- description: Use text buttons for optional actions, such as links to help center articles.
- example:
```jsx
{}}
onHelpButtonClick={() => {}}
>
{}}>
ManageLayoutDisplayDesignTextSupport
Frequently asked questions
}
ellipsis
>
Customize calendar page
}
ellipsis
>
Time zone display
}
ellipsis
>
Appointment time slots
}
ellipsis
>
Date and time formatting
}
ellipsis
>
How-to articles
Still having issues?
}
suffixIcon={}
ellipsis
>
Contact customer care
;
```
### List of actions
- description: Use a `dark` skin for a list of actions to avoid distracting or overwhelming the user.
- example:
```jsx
}>
Create Coupon
}>
Create Promo Video
}>
Send Email Campaign
}>
Share Product
}>
Edit SEO Settings
;
```
## Accessibility Examples
### Inline links
- description: Users with visual impairments may have trouble distinguishing links from text, if no additional visual indicators are given. Make inline text links stand out for all users: - Select a contrasting link color, such as `standard` text button next to dark text. - Use text button `underline`. - Or use a fitting `prefixIcon` or `suffixIcon`. Also, use meaningful link text that conveys its function independently of the surrounding content. For example, say 'Learn More about Automations' instead of 'Learn More'.
- example:
```jsx
Manage all recurring payments from Pricing Plans, Stores & Invoices.
Learn more about Subscriptions
}
actionsBar={}>Sell Pricing Plan}
/>
Page content;
```
### External links
- description: Use text button `underline` and `ExternalLink` icon to emphasize text buttons that open up a link in a new tab.
- example:
```jsx
Send updates, offers or newsletters and keep in touch with your
customers.
}
>
Learn more about email campaigns
}
actions={}
size="tiny"
hiddenBadge
alignItems="stretch"
image={
}
/>
;
```