js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Badge appearances!

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 03:04:44 -05:00
parent 84909930fb
commit 0a796d618f
2 changed files with 39 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/docs/components/badge.md
View File

@@ -22,6 +22,43 @@ Set the `variant` attribute to change the badge's variant.
<wa-badge variant="danger">Danger</wa-badge>
```
### Appearance
Use the `appearance` attribute to change the badge's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="neutral">Both</wa-badge>
<wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="brand">Both</wa-badge>
<wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="success">Both</wa-badge>
<wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="warning">Both</wa-badge>
<wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="danger">Both</wa-badge>
<wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>
```
### Pill Badges
Use the `pill` attribute to give badges rounded edges.

3
src/components/badge/badge.ts
View File

@@ -2,6 +2,7 @@ import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './badge.css';
@@ -24,7 +25,7 @@ import styles from './badge.css';
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {
static shadowStyle = [variantStyles, styles];
static shadowStyle = [variantStyles, appearanceStyles, styles];
/** The badge's theme variant. */
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';