Button
ButtonsPrimary interactive element. Variants: solid, outline, ghost, link.
Primary interactive control for triggered actions. Pick intent to communicate hierarchy: primary for the dominant CTA, outline/ghost for secondary actions, destructive for irreversible operations.
Usage
import { Button } from "nosible-ux"
export default function Example() {
return <Button intent="primary">Scan signals</Button>
}Examples
Intents
Sizes
Loading state
Link intent
Accessibility
Renders a native button element. During loading, visible label is replaced with animated dots; loadingLabel becomes the accessible name via aria-label. Use asChild with a router Link when the button navigates so the DOM element is an a tag.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | — | When true, renders the child element as the button instead of a `<button>` tag. |
intent | "link" | "ghost" | "outline" | "primary" | "secondary" | "destructive" | null | undefined | — | |
loading | boolean | undefined | — | When true, disables the button and shows the brand mono progress text in place of children. |
loadingLabel | string | undefined | — | Label shown while `loading` is true. Default: `"WORKING"`. |
size | "sm" | "md" | "lg" | "icon" | null | undefined | — |