Use Button+router for label chips instead of next/link

This allows us to use preventDefault on click, which means labels
can be inside of grid cards, and clicking a label wont navigate
to the card's page.

packages/web/components/elements/LabelChip.tsx

@@ -1,6 +1,7 @@
-import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
-import { StyledText } from './StyledText'
+
 
 type LabelChipProps = {
   text: string
@@ -8,6 +9,7 @@ type LabelChipProps = {
 }
 
 export function LabelChip(props: LabelChipProps): JSX.Element {
+  const router = useRouter()
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
     const r = (bigint >> 16) & 255
@@ -17,8 +19,12 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
     return [r, g, b]
   }
   const color = hexToRgb(props.color)
+
   return (
-    <Link href={`/home?q=label:"${props.text}"`}>
+    <Button style="plainIcon" onClick={(e) => {
+      router.push(`/home?q=label:"${props.text}"`)
+      e.stopPropagation()
+    }}>
       <SpanBox
         css={{
           display: 'inline-table',
@@ -37,6 +43,6 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
       >
         {props.text}
       </SpanBox>
-    </Link>
+    </Button>
   )
 }