diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md
index fad003729..3e7260b26 100644
--- a/docs/docs/components/badge.md
+++ b/docs/docs/components/badge.md
@@ -89,22 +89,34 @@ Use the `pill` attribute to give badges rounded edges.
Danger
```
-### Pulsating Badges
+### Drawing Attention
-Use the `pulse` attribute to draw attention to the badge with a subtle animation.
+Use the `attention` attribute to draw attention to the badge with a subtle animation. Supported effects are `bounce`, `pulse` and `none`.
```html {.example}
-
-
1
-
1
-
1
-
1
-
1
+
+ 1
+ 1
+ 1
+ 1
+ 1
+
+
+
+ 1
+ 1
+ 1
+ 1
+ 1
```
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index c1806e33d..d92da39c1 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -15,6 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio
## Next
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
+- 🚨 BREAKING: Renamed `pulse` attribute in `
` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
- Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924]
## 3.0.0-alpha.13
diff --git a/src/components/badge/badge.css b/src/components/badge/badge.css
index 896d05a1f..dd1a2da39 100644
--- a/src/components/badge/badge.css
+++ b/src/components/badge/badge.css
@@ -23,8 +23,8 @@
border-radius: var(--wa-border-radius-pill);
}
-/* Pulse modifier */
-:host([pulse]) {
+/* Pulse attention */
+:host([attention='pulse']) {
--pulse-color: var(--background-color);
animation: pulse 1.5s infinite;
@@ -42,6 +42,27 @@
}
}
+/* Bounce attention */
+:host([attention='bounce']) {
+ animation: bounce 1s cubic-bezier(0.28, 0.84, 0.42, 1) infinite;
+}
+
+@keyframes bounce {
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+ 40% {
+ transform: translateY(-5px);
+ }
+ 60% {
+ transform: translateY(-2px);
+ }
+}
+
::slotted(wa-icon) {
margin-inline-end: var(--wa-space-2xs, 0.25em);
opacity: 90%;
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 4b9edffba..7544eadaa 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -39,7 +39,7 @@ export default class WaBadge extends WebAwesomeElement {
@property({ type: Boolean, reflect: true }) pill = false;
/** Makes the badge pulsate to draw attention. */
- @property({ type: Boolean, reflect: true }) pulse = false;
+ @property({ reflect: true }) attention: 'none' | 'pulse' = 'none';
render() {
return html` `;