"primary" | "secondary" | "tertiary" | "ghost" | "danger"
| `"primary"` | Specify the kind of button. |
-| size | "default" | "field" | "small"
| `"default"` | Specify the size of button. |
-| hasIconOnly | boolean
| `false` | Set to `true` for the icon-only variant. |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default
| -- | Specify the icon from `carbon-icons-svelte` to render. |
-| iconDescription | string
| -- | Specify the ARIA label for the button icon. |
-| tooltipAlignment | "start" | "center" | "end"
| -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
-| tooltipPosition | "top" | "right" | "bottom" | "left"
| -- | Set the position of the tooltip relative to the icon. |
-| as | boolean
| `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). |
-| skeleton | boolean
| `false` | Set to `true` to display the skeleton state. |
-| disabled | boolean
| `false` | Set to `true` to disable the button. |
-| href | string
| -- | Set the `href` to use an anchor link. |
-| tabindex | string
| `"0"` | Specify the tabindex. |
-| type | string
| `"button"` | Specify the `type` attribute for the button element. |
-| ref | null | HTMLAnchorElement | HTMLButtonElement
| `null` | Obtain a reference to the HTML element. |
+| Prop name | Type | Default value | Description |
+| :--------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"
| `"primary"` | Specify the kind of button. |
+| size | "default" | "field" | "small"
| `"default"` | Specify the size of button. |
+| hasIconOnly | boolean
| `false` | Set to `true` for the icon-only variant. |
+| icon | typeof import("carbon-icons-svelte/lib/Add16").default
| -- | Specify the icon from `carbon-icons-svelte` to render. |
+| iconDescription | string
| -- | Specify the ARIA label for the button icon. |
+| tooltipAlignment | "start" | "center" | "end"
| -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true`. |
+| tooltipPosition | "top" | "right" | "bottom" | "left"
| -- | Set the position of the tooltip relative to the icon. |
+| as | boolean
| `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>). |
+| skeleton | boolean
| `false` | Set to `true` to display the skeleton state. |
+| disabled | boolean
| `false` | Set to `true` to disable the button. |
+| href | string
| -- | Set the `href` to use an anchor link. |
+| tabindex | string
| `"0"` | Specify the tabindex. |
+| type | string
| `"button"` | Specify the `type` attribute for the button element. |
+| ref | null | HTMLAnchorElement | HTMLButtonElement
| `null` | Obtain a reference to the HTML element. |
### Slots
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index a14cf22d..d03ac2ea 100644
--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
@@ -791,7 +791,7 @@
{
"kind": "let",
"value": "\"primary\"",
- "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"",
+ "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
"description": "Specify the kind of button"
}
],
@@ -923,8 +923,8 @@
[
"click",
{
- "start": 3947,
- "end": 3955,
+ "start": 3984,
+ "end": 3992,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@@ -934,8 +934,8 @@
[
"mouseover",
{
- "start": 3962,
- "end": 3974,
+ "start": 3999,
+ "end": 4011,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@@ -945,8 +945,8 @@
[
"mouseenter",
{
- "start": 3981,
- "end": 3994,
+ "start": 4018,
+ "end": 4031,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@@ -956,8 +956,8 @@
[
"mouseleave",
{
- "start": 4001,
- "end": 4014,
+ "start": 4038,
+ "end": 4051,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index bbbd6705..10229c14 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -28,6 +28,14 @@ description: High-level description
+### Danger tertiary button
+
+
+
+### Danger ghost button
+
+
+
### Button with icon
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 3b8303df..39734839 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -1,7 +1,7 @@