mirror of
https://github.com/hanzoai/o11y-components.git
synced 2026-10-30 14:54:15 +00:00
zeekay
464e1eece0
A version written into a manifest is written into every manifest that wants it, which is how eslint came to exist in a hundred and four forms across this estate and how a package came to resolve twice at run time. The catalog moves the number out of the manifest: a manifest names the package, the workspace names the version. Four are held below their latest because the newer release cannot be used, and the reason is recorded rather than the version alone: @noble/hashes 2 renamed every subpath the web3 stack imports, @splinetool/runtime 2 depends on a package that was never published, @dynamic-labs 5.4.1 the same, and react-resizable-panels 3 points its types condition at the bundle.
141 lines
4.3 KiB
Plaintext
141 lines
4.3 KiB
Plaintext
import { Meta, Controls, Primary } from '@storybook/addon-docs/blocks';
|
|
import * as ButtonStories from './button.stories';
|
|
import * as ButtonGroupStories from './button-group.stories';
|
|
import { Button } from '@signozhq/ui';
|
|
|
|
<Meta of={ButtonStories} />
|
|
|
|
# Button
|
|
|
|
A versatile button that maps to a native `<button>` (or any child via `asChild`). Supports color/variant/size tokens, prefix/suffix slots, loading state, and forwards every native `HTMLButtonElement` attribute + event handler.
|
|
|
|
## How to use
|
|
|
|
```tsx
|
|
import { Button } from '@signozhq/ui';
|
|
|
|
export default function MyComponent() {
|
|
// the default button is a solid button with the primary color
|
|
return <Button>Click Me</Button>;
|
|
}
|
|
```
|
|
|
|
<Primary />
|
|
|
|
## Variants
|
|
|
|
`variant` controls the visual treatment. `solid` is the default; `outlined` + `dashed` work best paired with `color="secondary"`; `ghost` is a borderless text-only button; `link` styles the button as inline text; `action` reads its background from the surrounding surface (see [Action buttons](#action-buttons)).
|
|
|
|
```tsx
|
|
<Button variant="solid">Solid</Button>
|
|
<Button variant="outlined" color="secondary">Outlined</Button>
|
|
<Button variant="dashed" color="secondary">Dashed</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
<Button variant="link">Link</Button>
|
|
```
|
|
|
|
## Colors
|
|
|
|
`color` swaps the palette behind any variant. Pair with `variant` to get the right combination.
|
|
|
|
```tsx
|
|
<Button>Primary</Button>
|
|
<Button color="destructive">Destructive</Button>
|
|
<Button color="warning">Warning</Button>
|
|
<Button variant="outlined" color="secondary">Secondary</Button>
|
|
```
|
|
|
|
## Sizes
|
|
|
|
`size="sm"` and `size="md"` (default) cover the common cases. `size="icon"` produces a square button sized for a single icon child.
|
|
|
|
```tsx
|
|
<Button size="sm">Small</Button>
|
|
<Button size="md">Medium</Button>
|
|
<Button size="icon" aria-label="More"><Ellipsis /></Button>
|
|
```
|
|
|
|
## Icons (prefix / suffix)
|
|
|
|
Place an icon before or after the label with `prefix` / `suffix`. For an icon-only button, combine `prefix` with `size="icon"`.
|
|
|
|
```tsx
|
|
<Button prefix={<Plus />}>Create alert</Button>
|
|
<Button suffix={<ChevronRight />} variant="outlined" color="secondary">Next</Button>
|
|
<Button size="icon" prefix={<Code />} aria-label="Code" />
|
|
```
|
|
|
|
## Loading
|
|
|
|
`loading` disables the button and replaces the leading icon with a spinner. The `suffix` is hidden while loading.
|
|
|
|
```tsx
|
|
<Button loading prefix={<Plus />}>Saving…</Button>
|
|
```
|
|
|
|
## Action buttons
|
|
|
|
`variant="action"` reads its background from the surface it's placed on via the `background` prop (`ink-500`, `ink-400`, `vanilla-100`, `vanilla-200`).
|
|
|
|
```tsx
|
|
<div style={{ padding: 24, backgroundColor: 'var(--bg-ink-500)' }}>
|
|
<Button variant="action" background="ink-500" prefix={<ChevronLeft />}>
|
|
Action
|
|
</Button>
|
|
</div>
|
|
```
|
|
|
|
## `asChild`
|
|
|
|
Render the button as the immediate child element (via Radix `Slot`) instead of a native `<button>`. Use this to turn a `Button` into a link while keeping its styling.
|
|
|
|
```tsx
|
|
<Button asChild variant="link" color="primary">
|
|
<a href="/docs">Read the docs</a>
|
|
</Button>
|
|
```
|
|
|
|
`loading`, `prefix`, and `suffix` are not supported in this mode.
|
|
|
|
## Native attributes
|
|
|
|
`ButtonProps` extends `HTMLButtonElement`'s attribute surface. All standard event handlers (`onClick`, `onMouseEnter`/`Leave`, `onFocus`/`Blur`, `onKeyDown`/`Up`, etc.) plus `aria-*`, `data-*`, `tabIndex`, `id`, `title`, and `type="submit" | "button" | "reset"` are typed and forwarded.
|
|
|
|
```tsx
|
|
<form onSubmit={onSubmit}>
|
|
<Button type="submit">Submit</Button>
|
|
</form>
|
|
```
|
|
|
|
## ButtonGroup
|
|
|
|
`ButtonGroup` is a segmented cluster of related buttons. It renders `<div role="group">` with deduped internal borders and only the outer corners rounded. `size`, `variant`, and `color` set on the group are inherited by descendant `Button`s through context — per-button props still take precedence.
|
|
|
|
```tsx
|
|
import { Button, ButtonGroup } from '@signozhq/ui';
|
|
|
|
<ButtonGroup variant="outlined" color="secondary">
|
|
<Button>Day</Button>
|
|
<Button>Week</Button>
|
|
<Button>Month</Button>
|
|
</ButtonGroup>;
|
|
```
|
|
|
|
Override the color of a single member without touching the rest of the group:
|
|
|
|
```tsx
|
|
<ButtonGroup variant="outlined" color="secondary">
|
|
<Button>Approve</Button>
|
|
<Button>Hold</Button>
|
|
<Button color="destructive">Reject</Button>
|
|
</ButtonGroup>
|
|
```
|
|
|
|
## Button Props
|
|
|
|
<Controls of={ButtonStories.Default} />
|
|
|
|
## ButtonGroup Props
|
|
|
|
<Controls of={ButtonGroupStories.Default} />
|