- `Button` always render semantic buttons, and has an API that allows it to render both as
- a button with a visual text label and optional icon
- or an icon-only button
- `ButtonLink`
- a mirror of `Button`, but that is meant to render links that visually look like buttons
- it has all the same capabilities to render with or without a visible text label
- `Button` renders always a button-like element with a visible text label
- it offers ways to render semantically as a link, while keeping its visuals intact
- it is not able to render an icon-only button
- `IconButton`
- it offers ways to render semantically as a link, while keeping its visuals intact
- it is not able to render a button with a visual label, only with an icon (label is kept semantically and shown as a tooltip)
```jsx
// Visually labelled button
// Visually labelled link
// (that looks like a button)
Open
// Icon-only button
```jsx
// Visually labelled button
// Visually labelled link
// (that looks like a button)
}
>
Open
// Icon-only button
}
/>
// Link that looks like
// an icon-only button
}
render={}
/>
```
PR Checklist
[x] Added tests for bugs / new features
[x] Updated docs (storybooks, readme)
[x] Executed npm run validate and made sure no errors / warnings were shown
[x] Described changes in CHANGELOG.md
[x] Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
[ ] Reviewed and approved Chromatic visual regression tests in CI
Short description
PR Checklist
npm run validate
and made sure no errors / warnings were shownCHANGELOG.md
package.json
andpackage-lock.json
(npm --no-git-tag-version version <major|minor|patch>
) refVersioning