Small button refactor, overflow and popout menus

docs/components/button.md

@@ -1,35 +1,77 @@
-# Button
+# Buttons
+
+## Standard
 
 <DemoContainer>
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button><BookmarkIcon /> Save</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><PlusIcon /> Create new instance</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
 </DemoContainer>
 
 ```vue
-<Button>Standard</Button>
-<Button color="primary">Primary</Button>
-<Button color="secondary">Secondary</Button>
-<Button color="highlight">Highlight</Button>
-<Button color="raised">Raised</Button>
-<Button color="danger">Danger</Button>
-<Button><CheckIcon /> With Icon</Button>
-<Button iconOnly><XIcon /></Button>
-<Button large>Large button</Button>
-<Button color="primary" large>Discover mods</Button>
-<Button color="danger" large outline>Be warned</Button>
-<Button large outline>Sign up</Button>
-<Button><HeartIcon /> Follow project</Button>
-<Button outline color="danger"><TrashIcon /> Delete project</Button>
+<Button><HeartIcon /> Like</Button>
+<Button color="primary"><UploadIcon /> Upload</Button>
+<Button color="secondary"><EditIcon /> Edit</Button>
+<Button color="highlight"><ScaleIcon /> Submit for review</Button>
+<Button color="danger"><TrashIcon /> Delete</Button>
+```
+
+## Large
+
+<DemoContainer>
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" large><DownloadIcon /> Download</Button>
+<Button color="blue" large><ServerIcon /> Host a Server</Button>
+<Button color="purple" large><HeartIcon /> Donate</Button>
+```
+
+## Outline
+
+<DemoContainer>
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+</DemoContainer>
+
+```vue
+<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
+<Button color="red" outline><ReportIcon /> Report project</Button>
+```
+
+## Transparent
+
+<DemoContainer>
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+</DemoContainer>
+
+```vue
+<Button transparent><IssuesIcon /> Report issues</Button>
+<Button transparent><CodeIcon /> View sources</Button>
+<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
+```
+
+## Icon-only
+
+<DemoContainer>
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
+</DemoContainer>
+
+```vue
+<Button icon-only><HeartIcon /></Button>
+<Button icon-only><XIcon /></Button>
+<Button icon-only><MoreHorizontalIcon /></Button>
+<Button icon-only transparent><SunIcon /></Button>
+<Button icon-only transparent><DropdownIcon /></Button>
 ```