Bitcart UI SDK Documentation

Layout context required

This component depends on the layout context: make sure LayoutContextProvider is present at the root level of the layout.

object

DefaultThe primary link-as-button of a view

import { LinkButton } from "@bitcart/ui-kit/components"export const DefaultLinkButtonExample: React.FC = () => (

SecondaryA supporting destination shown alongside the primary one

import { LinkButton } from "@bitcart/ui-kit/components"export const SecondaryLinkButtonExample: React.FC = () => (

AccentAccent fill, to draw attention without competing with the primary action

import { LinkButton } from "@bitcart/ui-kit/components"export const AccentLinkButtonExample: React.FC = () => (

DestructiveLinks leading to irreversible or otherwise dangerous flows

import { LinkButton } from "@bitcart/ui-kit/components"export const DestructiveLinkButtonExample: React.FC = () => (

OutlineBorder only, for low-emphasis destinations

import { LinkButton } from "@bitcart/ui-kit/components"export const OutlineLinkButtonExample: React.FC = () => (

GhostNo fill until hovered, for dense toolbars and icon rows

import { LinkButton } from "@bitcart/ui-kit/components"export const GhostLinkButtonExample: React.FC = () => (

LinkPlain underlined link appearance

import { LinkButton } from "@bitcart/ui-kit/components"export const LinkLinkButtonExample: React.FC = () => (

WhiteFor surfaces that retain dark background regardless of the theme, such as a brand-colored landing hero

import { LinkButton } from "@bitcart/ui-kit/components"export const WhiteLinkButtonExample: React.FC = () => (

Expanding on hoverScales up slightly on hover, combines with any variant

import { LinkButton } from "@bitcart/ui-kit/components"export const ExpandOnHoverLinkButtonExample: React.FC = () => (

ExternalOpens an external destination in a new tab with an accessibility hint

import { LinkButton } from "@bitcart/ui-kit/components"export const ExternalLinkButtonExample: React.FC = () => (

Link Button