fusion-wc-badge

Storybook

Installation

npm install @equinor/fusion-wc-badge

Badge <fwc-badge>

Example Usage

Default

return (
  <fwc-badge>10</fwc-badge>
);

Sizes

return (
  <fwc-badge icon="settings" size="small" />
  <fwc-badge icon="settings" size="medium" />
  <fwc-badge icon="settings" size="large" />
);

Positions

return (
  <fwc-badge position="top-left" />
  <fwc-badge position="top-right" />
  <fwc-badge position="bottom-left" />
  <fwc-badge position="bottom-right" />
);

Icon

return (
  <fwc-badge icon="settings" />
);

Circular parent (Use if the parent component is circular instead of rectangular for correct positioning)

return (
  <fwc-badge circular />
);

Properties/Attributes

Name | Type | Default | Description --------------------- | -------------- | ----------- | ----------------- size | BadgeSize* | medium | Size of the badge. position | BadgePosition** | top-right | Absolute corner position for the badge. color | BadgeColor*** | secondary | Color of the badge. value | string | | Text value to be rendered within the badge. `icon` | `IconName****` | | Icon to be rendered within the badge. circular | boolean | false | Set to true if badge is placed within a circular wrapper for correct position. tooltip | string | `` | Tooltip text to show on hover.

* BadgeSize is exported by fwc-badge.

type BadgeSize = 'small' | 'medium' | 'large';

** BadgePosition is exported by fwc-badge.

type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

*** BadgeColor is exported by fwc-badge.

type BadgeColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'disabled';

**** IconName is exported by fwc-icon and is based on EDS icon tokens.

type IconName = 'calendar' | 'settings'...;