## Feature Examples
### Size
- description: Update the dimensions of a button with the `size` prop. - `large` is for onboarding flows and marketing pages where the action needs more emphasis. - `medium` is the default for all common cases. - `small` is for icon buttons used in cards and widgets. - `tiny` is for small and dense layouts. _Note_: small and tiny size buttons should use the small icon size (18x18).
- example:
```jsx
;
```
### Skin
- description: Change the button's appearance with the `skin` prop. - `standard` is the default for all general actions. - `light` is for dark backgrounds. - `transparent` is for backgrounds with colors or images. - `premium` is for actions that prompt users to upgrade their plans. - `dark` should be used with buttons on backgrounds with colors. - `ai` should be used with AI based features. Each action can be `primary`, `secondary` or `tertiary`, depending on priority. There should only be one primary action per page. _Note_: Secondary buttons should be used alongside primary buttons for less utilized actions, such as cancel or back.
- example:
```jsx
;
```
### Disabled
- description: To disable a button, use the `disabled` prop which indicates a button can't be selected.
- example:
```jsx
;
```
## Developer Examples
### Custom HTML tag
- description: Render buttons as any given HTML tag with the `as` prop. For example, they can be rendered as: - `` when attributes like `href`, `target` are needed. - `` when props like `to`, `replace`, etc. are needed. All attributes will be passed to the rendered element.
- example:
```jsx
() => {
const ReactRouterLink = (props) => ;
return (
{' tag'}
{'React router tag'}
{'Native tag'}
);
};
```
## Common Use Case Examples
### Button labels
- description: Use [``](#/component/tooltip) to add a label to icon buttons.
- example:
```jsx
;
```
### Small layouts
- description: Use icon buttons in small and crowded layouts.
- example:
```jsx
}
>
Pasta with Ricotta Cheese
;
```
### Popover menu
- description: Use icon buttons to open a ``.
- example:
```jsx
() => {
const renderImage = () => ;
const renderContent = () => (
JAVA meetup
Jan 20, 2021, 10:00 AM, Location will be announced later
}
>
}
/>
}
/>
}
/>
}
>
Promote
);
return (
{renderImage()}
{renderContent()}
);
};
```
### Low priority actions
- description: Use icon buttons for lower-priority actions that have no effect on the main user flow. For example, to change the cover image of an audio.
- example:
```jsx
{}} skin="floating" width="288px">
;
```