@equinor/fusion-wc-badge

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