feat(ui): add danger variant to Button component

Added a `danger` variant for destructive actions like delete or remove.
Uses solid red background with white text in both light and dark modes.

- Added CSS styles with custom properties for future token migration
- Updated Storybook stories to include danger variant examples
- Updated docs-ui documentation to reflect the new variant

Signed-off-by: Johan Persson <johanopersson@gmail.com>

docs-ui/src/app/components/button/components.tsx

@@ -59,6 +59,22 @@ export const Disabled = () => {
   );
 };
 
+export const Destructive = () => {
+  return (
+    <Flex gap="4">
+      <Button variant="primary" destructive>
+        Primary
+      </Button>
+      <Button variant="secondary" destructive>
+        Secondary
+      </Button>
+      <Button variant="tertiary" destructive>
+        Tertiary
+      </Button>
+    </Flex>
+  );
+};
+
 export const Loading = () => {
   return (
     <Button variant="primary" loading={true}>

docs-ui/src/app/components/button/page.mdx

@@ -7,6 +7,7 @@ import {
   sizesSnippet,
   withIconsSnippet,
   disabledSnippet,
+  destructiveSnippet,
   loadingSnippet,
   asLinkSnippet,
   buttonSnippetUsage,
@@ -22,6 +23,7 @@ import {
   Sizes,
   WithIcons,
   Disabled,
+  Destructive,
   Loading,
   AsLink,
 } from './components';
@@ -32,7 +34,7 @@ export const reactAriaUrls = {
 
 <PageTitle
   title="Button"
-  description="A button with primary, secondary, and tertiary variants and loading state."
+  description="A button with primary, secondary, and tertiary variants, destructive styling, and loading state."
 />
 
 <Snippet align="center" py={4} preview={<Variants />} code={variantsSnippet} />
@@ -95,6 +97,19 @@ Icons can appear before or after the label.
   layout="side-by-side"
 />
 
+### Destructive
+
+Use the `destructive` prop for dangerous actions like delete or remove.
+
+<Snippet
+  align="center"
+  py={4}
+  open
+  preview={<Destructive />}
+  code={destructiveSnippet}
+  layout="side-by-side"
+/>
+
 ### Loading
 
 Shows a spinner and disables interaction during async operations.

docs-ui/src/app/components/button/props-definition.tsx

@@ -16,6 +16,12 @@ export const buttonPropDefs: Record<string, PropDef> = {
       </>
     ),
   },
+  destructive: {
+    type: 'boolean',
+    default: 'false',
+    description:
+      'Applies destructive styling for dangerous actions like delete or remove.',
+  },
   size: {
     type: 'enum',
     values: ['small', 'medium'],

docs-ui/src/app/components/button/snippets.ts

@@ -43,6 +43,18 @@ export const disabledSnippet = `<Flex gap="4">
   </Button>
 </Flex>`;
 
+export const destructiveSnippet = `<Flex gap="4">
+  <Button variant="primary" destructive>
+    Primary
+  </Button>
+  <Button variant="secondary" destructive>
+    Secondary
+  </Button>
+  <Button variant="tertiary" destructive>
+    Tertiary
+  </Button>
+</Flex>`;
+
 export const loadingSnippet = `<Button variant="primary" loading={true}>
   Load more items
 </Button>`;