diff --git a/core/src/components/anchor/anchor.scss b/core/src/components/anchor/anchor.scss
index e150c03b42..9776cb6da8 100644
--- a/core/src/components/anchor/anchor.scss
+++ b/core/src/components/anchor/anchor.scss
@@ -4,16 +4,19 @@
// --------------------------------------------------
:host {
- // default background / color
- --color: #{ion-color(primary, base)};
+ /**
+ * @prop --background: Background of the badge
+ * @prop --color: Text color of the badge
+ */
--background: transparent;
+ --color: #{ion-color(primary, base)};
background: var(--background);
color: var(--color);
}
:host(.ion-color) {
- --color: #{current-color(base)};
+ color: current-color(base);
}
a {
diff --git a/core/src/components/anchor/readme.md b/core/src/components/anchor/readme.md
index 76246e40bc..b5afbb267c 100644
--- a/core/src/components/anchor/readme.md
+++ b/core/src/components/anchor/readme.md
@@ -60,6 +60,13 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`.
+## CSS Custom Properties
+
+| Name | Description |
+| -------------- | ----------------------- |
+| `--background` | Background of the badge |
+| `--color` | Text color of the badge |
+
----------------------------------------------
diff --git a/core/src/components/anchor/test/standalone/index.html b/core/src/components/anchor/test/standalone/index.html
new file mode 100644
index 0000000000..ca2e94be46
--- /dev/null
+++ b/core/src/components/anchor/test/standalone/index.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+ Anchor - Standalone
+
+
+
+
+
+
+ Default
+ Anchor
+
+ Colors
+ Primary Anchor
+ Secondary Anchor
+ Tertiary Anchor
+ Success Anchor
+ Warning Anchor
+ Danger Anchor
+ Light Anchor
+ Medium Anchor
+ Dark Anchor
+
+ Custom
+ Underline Anchor
+ Cursive Anchor
+ Custom Anchor
+ Custom Secondary Anchor
+
+
+
+
+