Components / Actions

Button

A link styled as a button, in five variants and three sizes: md for marketing pages, sm for the console, xs for dense console panels. danger is for destructive actions, such as a stop switch. External links open in a new tab and get an up-right arrow.

Extracted fromMarketing siteExplorer

Import

tsx

import { Button, buttonClass } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Button, buttonClass } from "@somnia-chain/ui/next"

Examples

Variants

Talk to an expert Read the docs Ghost External link Revoke session

examples/button/variants.tsxShow code

tsx

import { Button } from "@somnia-chain/ui"

export default function ButtonVariants() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button href="#">Talk to an expert</Button>
      <Button href="#" variant="secondary">
        Read the docs
      </Button>
      <Button href="#" variant="ghost">
        Ghost
      </Button>
      <Button href="https://docs.somnia.network" variant="secondary">
        External link
      </Button>
      <Button href="#" variant="danger">
        Revoke session
      </Button>
    </div>
  )
}

Sizes

Use buttonClass() to style a real <button> the same way.

Marketing (md)Console (sm)SecondaryDense panel (xs)

examples/button/sizes.tsxShow code

tsx

import { Button, buttonClass } from "@somnia-chain/ui"

export default function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button href="#" size="md">
        Marketing (md)
      </Button>
      <Button href="#" size="sm">
        Console (sm)
      </Button>
      <Button href="#" size="sm" variant="secondary">
        Secondary
      </Button>
      <button type="button" className={buttonClass({ size: "sm", variant: "secondary" })}>
        A real &lt;button&gt;
      </button>
      <Button href="#" size="xs" variant="secondary">
        Dense panel (xs)
      </Button>
      <button type="button" className={buttonClass({ size: "xs", variant: "danger" })}>
        Stop
      </button>
    </div>
  )
}

On violet

inverse is for the violet band.

Talk to an expert Start building

examples/button/inverse.tsxShow code

tsx

import { Button } from "@somnia-chain/ui"

export default function ButtonInverse() {
  return (
    <div className="tone-violet flex flex-wrap gap-3 rounded-[6px] p-8">
      <Button href="#" variant="inverse">
        Talk to an expert
      </Button>
      <Button href="#" variant="secondary" className="text-white">
        Start building
      </Button>
    </div>
  )
}

Props

Button

Prop	Type	Default	Description
href	string	—	Destination. Absolute http(s) URLs count as external.
variant	"primary" \| "secondary" \| "ghost" \| "inverse" \| "danger"	"primary"	Visual weight. danger is the secondary button in the down ink.
size	"md" \| "sm" \| "xs"	"md"	md is 44px tall, sm is 36px, xs is 28px.
arrow	boolean	md, or external at sm and xs	Trailing arrow.
external	boolean	from href	Open in a new tab.
linkAs	LinkComponent	<a>	Component for internal links. @somnia-chain/ui/next sets it to next/link.