Added Select for order and placemenet

examples/Toast.order.css

@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: var(--iui-size-xs);
+}

examples/Toast.order.jsx

@@ -3,21 +3,30 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useToaster, Button } from '@itwin/itwinui-react';
+import { useToaster, Button, Select } from '@itwin/itwinui-react';
 
 export default () => {
   const toaster = useToaster();
+  const [selectedOrder, setSelectedOrder] = React.useState('auto');
 
   React.useEffect(() => {
     toaster.setSettings({
-      order: 'ascending',
+      order: selectedOrder,
     });
   }, []);
 
   return (
     <div className='demo-container'>
+      <Select
+        placeholder='Select order'
+        options={[
+          { value: 'ascending', label: 'Ascending' },
+          { value: 'descending', label: 'Descending' },
+          { value: 'auto', label: 'Auto' },
+        ]}
+      ></Select>
       <Button onClick={() => toaster.informational('This is a toast message.')}>
-        Ascending toast
+        Open toast
       </Button>
     </div>
   );

examples/Toast.placement.css

@@ -2,4 +2,5 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  gap: var(--iui-size-xs);
 }

examples/Toast.placement.jsx

@@ -3,21 +3,34 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { useToaster, Button } from '@itwin/itwinui-react';
+import { useToaster, Button, Select } from '@itwin/itwinui-react';
 
 export default () => {
   const toaster = useToaster();
+  const [selectedPlacement, setSelectedPlacement] = React.useState('top');
 
   React.useEffect(() => {
     toaster.setSettings({
-      placement: 'bottom-end',
+      placement: selectedPlacement,
     });
-  }, []);
+  }, [selectedPlacement]);
 
   return (
     <div className='demo-container'>
+      <Select
+        placeholder='Select placement'
+        options={[
+          { value: 'top', label: 'Top' },
+          { value: 'top-start', label: 'Top start' },
+          { value: 'top-end', label: 'Top end' },
+          { value: 'bottom', label: 'Bottom' },
+          { value: 'bottom-start', label: 'Bottom start' },
+          { value: 'bottom-end', label: 'Bottom end' },
+        ]}
+        onChange={(value) => setSelectedPlacement(value)}
+      ></Select>
       <Button onClick={() => toaster.informational('This is a toast message.')}>
-        Bottom-end toast
+        Open toast
       </Button>
     </div>
   );