docs(button): add danger and warning use cases

Author: gcornut

packages/site-demo/content/product/components/button/index.mdx

@@ -40,6 +40,19 @@ Use full width when you need to get the button full width.
 
 <DemoBlock vAlign="center" demo="full-width" withThemeSwitcher />
 
+## Warning
+
+Use `Warning` buttons to confirm actions that may cause a significant change.
+Low emphasis is currently not supported.
+
+<DemoBlock vAlign="center" demo="warning" withThemeSwitcher />
+
+## Danger
+
+Use `Danger` buttons to confirm a destructive and irreversible action, such as deleting.
+
+<DemoBlock vAlign="center" demo="danger" withThemeSwitcher />
+
 ### Accessibility concerns
 
 #### Button

packages/site-demo/content/product/components/button/react/danger.tsx

@@ -0,0 +1,20 @@
+import { mdiDelete } from '@lumx/icons';
+import { Button, Emphasis, FlexBox, IconButton, Orientation, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = ({ theme }: any) => (
+    <>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button color='red' theme={theme} >Delete</Button>
+            <IconButton label="Delete" icon={mdiDelete} color='red' theme={theme} />
+        </FlexBox>   
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.medium} color='red' theme={theme} >Delete</Button>
+            <IconButton label="Delete" icon={mdiDelete} emphasis={Emphasis.medium} color='red' theme={theme} />
+        </FlexBox>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.low} color='red' theme={theme} >Delete</Button>
+            <IconButton label="Delete" icon={mdiDelete} emphasis={Emphasis.low} color='red' theme={theme} />
+        </FlexBox>
+    </>
+);

packages/site-demo/content/product/components/button/react/warning.tsx

@@ -0,0 +1,16 @@
+import { mdiClose } from '@lumx/icons';
+import { Button, Emphasis, FlexBox, IconButton, Orientation, Size } from '@lumx/react';
+import React from 'react';
+
+export const App = ({ theme }: any) => (
+    <>
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button color='yellow' theme={theme} >Remove</Button>
+            <IconButton label="Remove" icon={mdiClose} color='yellow' theme={theme} />
+        </FlexBox>   
+        <FlexBox gap={Size.big} orientation={Orientation.horizontal} wrap>
+            <Button emphasis={Emphasis.medium} color='yellow' theme={theme} >Remove</Button>
+            <IconButton label="Remove" icon={mdiClose} emphasis={Emphasis.medium} color='yellow' theme={theme} />
+        </FlexBox>
+    </>
+);