Design KitComponentv0.3.0

NBButton

Primary/secondary actions with neo-brutal weight.

All componentsKit overviewContact

When to use

Use for primary actions, toolbar buttons, and inline calls to action.

Import

Import
tsx
import { NBButton } from "@/components/NB";

Example

Example
tsx
import { NBButton } from "@/components/NB";

export function Example() {
  return (
    <>
      <NBButton href="/contact" variant="pink">Contact</NBButton>
      <NBButton href="/design-kit" variant="outline">Docs</NBButton>
    </>
  );
}

Live preview

People also ask

Where do I import NBButton from?

Use: import { NBButton } from "@/components/NB";

How do I keep it multi-domain safe?

Don’t hardcode domains in metadata/JSON-LD. Use getSiteUrl() + toAbsoluteUrl().

Design kit

Turn this into a sellable export

If you want the “packaged kit” (versioning, license, exportable docs and components), we can scope the release pipeline.

ContactAll components