@equinor/fusion-wc-badge v1.3.1

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

* 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'...;