docs(button): add danger and warning use cases

Author: gcornut

packages/lumx-react/src/stories/generated/Button/Demos.stories.tsx

@@ -3,9 +3,11 @@
  */
 export default { title: 'LumX components/button/Button Demos' };
 
+export { App as Danger } from './danger';
 export { App as EmphasisHigh } from './emphasis-high';
 export { App as EmphasisLow } from './emphasis-low';
 export { App as EmphasisMedium } from './emphasis-medium';
 export { App as FullWidth } from './full-width';
 export { App as Small } from './small';
 export { App as Toggle } from './toggle';
+export { App as Warning } from './warning';

packages/lumx-react/src/stories/generated/Button/danger.tsx

@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/button/react/danger.tsx

packages/lumx-react/src/stories/generated/Button/warning.tsx

@@ -0,0 +1 @@
+../../../../../site-demo/content/product/components/button/react/warning.tsx

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,26 @@
+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,20 @@
+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>
+    </>
+);