Extract submit button

libs/form-renderer/src/FormRenderer.tsx

@@ -1,11 +1,11 @@
-import { Button } from '@amsterdam/design-system-react'
 import type {
   FormCheckboxComponentOutput,
   FormRadioComponentOutput,
   FormSelectComponentOutput,
   FormTextAreaComponentOutput,
   FormTextFieldInputComponentOutput,
 } from '@meldingen/api-client'
+import { SubmitButton } from '@meldingen/ui'
 import type { FormEvent } from 'react'
 
 import { Checkbox, Radio, Select, TextArea, TextInput } from './components'
@@ -42,8 +42,6 @@ type Props = {
 export const FormRenderer = ({ formData, onSubmit }: Props) => (
   <form className="ams-gap--md" onSubmit={onSubmit}>
     {formData.map((component) => getComponent(component))}
-    <Button type="submit" style={{ width: 'fit-content' }}>
-      Volgende vraag
-    </Button>
+    <SubmitButton>Volgende vraag</SubmitButton>
   </form>
 )

libs/ui/src/SubmitButton/SubmitButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  width: fit-content;
+}

libs/ui/src/SubmitButton/SubmitButton.tsx

@@ -0,0 +1,10 @@
+import type { ButtonProps } from '@amsterdam/design-system-react'
+import { Button } from '@amsterdam/design-system-react'
+
+import styles from './SubmitButton.module.css'
+
+export const SubmitButton = ({ children, ...restProps }: ButtonProps) => (
+  <Button {...restProps} className={styles.button} type="submit">
+    {children}
+  </Button>
+)

libs/ui/src/SubmitButton/index.ts

@@ -0,0 +1,3 @@
+'use client'
+
+export { SubmitButton } from './SubmitButton'

libs/ui/src/index.ts

@@ -2,3 +2,4 @@ export * from './Footer'
 export * from './Grid'
 export * from './Header'
 export * from './Screen'
+export * from './SubmitButton'