diff --git a/web/components/create-post.tsx b/web/components/create-post.tsx
index a4b65661..23a9c116 100644
--- a/web/components/create-post.tsx
+++ b/web/components/create-post.tsx
@@ -4,12 +4,12 @@ import { Title } from 'web/components/title'
 
 import { TextEditor, useTextEditor } from 'web/components/editor'
 import { createPost } from 'web/lib/firebase/api'
-import clsx from 'clsx'
 import Router from 'next/router'
 import { MAX_POST_TITLE_LENGTH } from 'common/post'
 import { postPath } from 'web/lib/firebase/posts'
 import { Group } from 'common/group'
 import { ExpandingInput } from './expanding-input'
+import { Button } from './button'
 
 export function CreatePost(props: { group?: Group }) {
   const [title, setTitle] = useState('')
@@ -91,12 +91,10 @@ export function CreatePost(props: { group?: Group }) {
             <TextEditor editor={editor} upload={upload} />
             <Spacer h={6} />
 
-            <button
+            <Button
               type="submit"
-              className={clsx(
-                'btn btn-primary normal-case',
-                isSubmitting && 'loading disabled'
-              )}
+              loading={isSubmitting}
+              size="xl"
               disabled={isSubmitting || !isValid || upload.isLoading}
               onClick={async () => {
                 setIsSubmitting(true)
@@ -105,7 +103,7 @@ export function CreatePost(props: { group?: Group }) {
               }}
             >
               {isSubmitting ? 'Creating...' : 'Create a post'}
-            </button>
+            </Button>
             {error !== '' && <div className="text-red-700">{error}</div>}
           </div>
         </form>