4.8.1 ā€¢ Published 3 years ago

@workday/canvas-kit-react-badge v4.8.1

Weekly downloads
498
License
Apache-2.0
Repository
github
Last release
3 years ago

Canvas Kit React Badge

CountBadge provides a quantity-based summary with dynamic values.

Installation

yarn add @workday/canvas-kit-react

or

yarn add @workday/canvas-kit-react-badge

Accessibility

A common use case for the CountBadge is for displaying notifications, and there are several accessibility concerns you'll want to keep in mind:

  • The button should have an aria-label that updates with the count
  • The elements inside the button should have aria-hidden
  • The live region should be outside the button
  • The live region should be visually hidden and only contain text

Example

import styled from '@emotion/styled';
import { accessibleHide } from "@workday/canvas-kit-react";

...

const AccessibleHide = styled('div')({
  ...accessibleHide,
});

...

<IconButton
  style={{ position: "relative" }}
  aria-label={`Alerts ${count} new notifications`}
  size={IconButton.Size.Medium}
  variant={IconButton.Variant.Circle}
>
  <SystemIcon icon={notificationsIcon} aria-hidden="true" />
  <Badge count={count} aria-hidden="true" />
</IconButton>
<AccessibleHide role="status" aria-live="polite" aria-atomic="true">
  New notifications
</div>

Usage

import * as React from 'react';
import {CountBadge} from '@workday/canvas-kit-react-badge';

// default CountBadge
<CountBadge count={3} />

// inverse CountBadge variant
<CountBadge variant="inverse" count={3} />

Static Properties

None

Component Props

Required

None

Optional

variant: 'default' | 'inverse'

Styled variant for the badge

VariantDescription
defaultRed background, White text
inverseWhite background, Blue text

Default: default

count: number

Count displayed on the badge

Default: 0

šŸ“ Note

Values greater than 999 are formatted to "999+"

canvascanvas-kitreactcomponentsworkdaybadge
@emotion/core@emotion/styled@workday/canvas-kit-react-core
@infinitebrahmanuniverse/nolb-_wor@everything-registry/sub-chunk-1021
4.8.3

3 years ago

4.8.2

3 years ago

4.8.1

3 years ago

4.8.0

3 years ago

4.7.1-next.18

3 years ago

4.7.1-next.14

3 years ago

4.7.1-next.15

3 years ago

4.7.1-next.16

3 years ago

4.7.1-next.0

3 years ago

4.7.1-next.1

3 years ago

4.7.1-next.2

3 years ago

4.7.1-next.3

3 years ago

4.7.1-next.4

3 years ago

4.7.1-next.5

3 years ago

4.7.1-next.6

3 years ago

4.7.1-next.7

3 years ago

4.7.1-next.8

3 years ago

4.7.1-next.9

3 years ago

4.7.1-next.10

3 years ago

4.7.1-next.11

3 years ago

4.7.1-next.12

3 years ago

4.7.0

3 years ago

4.6.1-next.3

3 years ago

4.6.1-next.2

3 years ago

4.6.1-next.1

3 years ago

4.6.0

3 years ago

4.5.2-next.3

3 years ago

4.5.2-next.1

3 years ago

4.5.2-next.2

3 years ago

4.5.2-next.0

3 years ago

4.5.1-next.4

3 years ago

4.5.1

3 years ago

4.5.1-next.3

3 years ago

4.5.1-next.2

3 years ago

4.5.1-next.1

3 years ago

4.5.1-next.0

3 years ago

5.0.0-beta.1-next.6

3 years ago

5.0.0-beta.1-next.5

3 years ago

4.5.0

3 years ago

5.0.0-beta.1-next.4

3 years ago

4.4.3-next.15

3 years ago

4.4.3-next.14

3 years ago

4.4.3-next.17

3 years ago

4.4.3-next.16

3 years ago

4.4.3-next.18

3 years ago

4.4.3-next.13

3 years ago

4.4.3-next.12

3 years ago

5.0.0-beta.1-next.3

3 years ago

4.4.3-next.11

3 years ago

4.3.1-beta.0-next.6

3 years ago

5.0.0-beta.0

3 years ago

5.0.0-beta.0-next.7

3 years ago

4.4.3-next.10

3 years ago

4.4.3-next.9

3 years ago

4.3.1-beta.0-next.5

3 years ago

4.4.3-next.8

3 years ago

4.3.1-beta.0-next.3

3 years ago

4.4.3-next.7

3 years ago

4.4.3-next.6

3 years ago

4.4.3-next.5

3 years ago

4.4.3-next.4

3 years ago

4.4.3-next.3

3 years ago

4.4.3-next.0

3 years ago

4.4.3-next.1

3 years ago

4.4.2

3 years ago

4.4.2-next.4

3 years ago

4.4.2-next.3

3 years ago

4.4.2-next.2

3 years ago

4.4.1-next.4

3 years ago

4.4.1

3 years ago

4.4.1-next.3

3 years ago

4.4.1-next.2

3 years ago

4.4.1-next.1

3 years ago

4.4.1-next.0

3 years ago

4.4.0

3 years ago

4.3.2-next.6

3 years ago

4.3.2-next.4

3 years ago

4.3.2-next.3

3 years ago

4.3.2-next.5

3 years ago

4.3.2-next.2

3 years ago

4.3.2-next.1

3 years ago

4.3.2-next.0

3 years ago

4.3.1

4 years ago

4.3.1-next.4

4 years ago

4.3.1-next.2

4 years ago

4.3.1-next.3

4 years ago

4.3.1-next.1

4 years ago

4.3.1-next.0

4 years ago

4.1.3-next.28

4 years ago

4.3.0

4 years ago

4.1.3-next.27

4 years ago

4.1.3-next.26

4 years ago

4.1.3-next.25

4 years ago

4.1.3-next.24

4 years ago

4.1.3-next.23

4 years ago

4.1.3-next.22

4 years ago

4.1.3-next.21

4 years ago

4.1.3-next.20

4 years ago

4.1.3-next.17

4 years ago

4.1.3-next.18

4 years ago

4.1.3-next.16

4 years ago

4.2.0

4 years ago

4.1.3-next.13

4 years ago

4.1.3-next.10

4 years ago

4.1.3-next.11

4 years ago

4.1.3-next.12

4 years ago

4.1.3-next.8

4 years ago

4.1.3-next.9

4 years ago

4.1.3-next.6

4 years ago

4.1.3-next.7

4 years ago

4.1.3-next.4

4 years ago

4.1.3-next.3

4 years ago

4.1.3-next.0

4 years ago

4.1.3-next.1

4 years ago

4.0.3

4 years ago

4.1.2

4 years ago

4.1.2-next.0

4 years ago

4.0.2

4 years ago

4.1.1

4 years ago

4.1.1-next.5

4 years ago

4.1.1-next.4

4 years ago

4.1.1-next.0

4 years ago

4.1.1-next.3

4 years ago

4.1.1-next.2

4 years ago

4.1.0

4 years ago

4.0.1-next.19

4 years ago

4.0.1-next.18

4 years ago

4.0.1-next.17

4 years ago

4.0.1-next.16

4 years ago

4.0.1-next.15

4 years ago

4.0.1-next.14

4 years ago

4.0.1

4 years ago

3.9.1

4 years ago

4.0.1-next.12

4 years ago

4.0.1-next.11

4 years ago

4.0.1-next.9

4 years ago

4.0.1-next.10

4 years ago

4.0.1-next.7

4 years ago

4.0.1-next.8

4 years ago

4.0.1-next.6

4 years ago

4.0.1-next.5

4 years ago

4.0.1-next.4

4 years ago

4.0.1-next.3

4 years ago

4.0.1-next.1

4 years ago

4.0.1-next.2

4 years ago

4.0.1-next.0

4 years ago

4.0.0

4 years ago

3.8.1-next.16

4 years ago

3.8.1-next.17

4 years ago

3.9.0

4 years ago

4.0.0-beta.5

4 years ago

3.8.1-next.15

4 years ago

3.8.1-next.14

4 years ago

3.8.1-next.13

4 years ago

3.8.1-next.12

4 years ago

3.8.1-next.11

4 years ago

3.8.1-next.10

4 years ago

3.8.1-next.9

4 years ago

3.8.1-next.7

4 years ago

3.8.1-next.8

4 years ago

3.8.1-next.6

4 years ago

3.8.1-next.5

4 years ago

3.8.1-next.3

4 years ago

3.8.1-next.4

4 years ago

3.8.1-next.2

4 years ago

3.8.1-next.0

4 years ago

3.8.1-next.1

4 years ago

3.8.0

4 years ago

3.7.1-next.8

4 years ago

3.7.1-next.7

4 years ago

3.7.1-next.6

4 years ago

3.7.1-next.3

4 years ago

3.7.1-next.4

4 years ago

3.7.1-next.5

4 years ago

3.7.1-next.2

4 years ago

3.7.1-next.0

4 years ago