Buttons

A Button triggers an action. An AnchorButton looks the same and navigates.

Usage#

import { AnchorButton, Button } from "@clawscale/react";

<Button intent="primary" text="Save" />

Examples#

Basic#

Set the label with text or pass children.

core/buttons/basic.tsx

import { Button } from "@clawscale/react";

export default function ButtonsBasic() {
  return (
    <>
      <Button text="Save" />
      <Button>Save as</Button>
    </>
  );
}

Intent#

intent signals what the action does. Use primary for the main action on a screen and danger for destructive ones.

core/buttons/intent.tsx

import { Button } from "@clawscale/react";

export default function ButtonsIntent() {
  return (
    <>
      <Button text="Default" />
      <Button intent="primary" text="Primary" />
      <Button intent="success" text="Success" />
      <Button intent="warning" text="Warning" />
      <Button intent="danger" text="Danger" />
    </>
  );
}

Variant#

variant sets the visual weight: solid (default), outlined or minimal. Use minimal buttons in toolbars and dense tables.

core/buttons/variant.tsx

import { Button } from "@clawscale/react";

export default function ButtonsVariant() {
  return (
    <>
      <Button intent="primary" text="Solid" />
      <Button intent="primary" variant="outlined" text="Outlined" />
      <Button intent="primary" variant="minimal" text="Minimal" />
    </>
  );
}

Size#

size accepts small, medium (default) and large.

core/buttons/size.tsx

import { Button } from "@clawscale/react";

export default function ButtonsSize() {
  return (
    <>
      <Button size="small" text="Small" />
      <Button size="medium" text="Medium" />
      <Button size="large" text="Large" />
    </>
  );
}

Icons#

icon renders before the text and endIcon after it. Icon-only buttons need an aria-label.

core/buttons/icons.tsx

import { Button } from "@clawscale/react";

export default function ButtonsIcons() {
  return (
    <>
      <Button icon="refresh" text="Refresh" />
      <Button endIcon="share" text="Share" />
      <Button icon="export" endIcon="caret-down" text="Export" />
      <Button icon="cog" aria-label="Settings" />
      <Button icon="trash" intent="danger" variant="minimal" aria-label="Delete" />
    </>
  );
}

States#

active, disabled and loading change how a button responds. A loading button keeps its width.

core/buttons/states.tsx

import { Button } from "@clawscale/react";

export default function ButtonsStates() {
  return (
    <>
      <Button active text="Active" />
      <Button disabled text="Disabled" />
      <Button loading text="Loading" />
      <Button intent="primary" loading text="Saving" />
    </>
  );
}

Fill#

fill stretches a button to its container. Pair it with alignText for menu-like triggers.

core/buttons/fill.tsx

import { Button } from "@clawscale/react";

export default function ButtonsFill() {
  return (
    <div style={{ display: "grid", gap: 8, width: "100%", maxWidth: 360 }}>
      <Button fill intent="primary" text="Run pipeline" />
      <Button fill alignText="start" endIcon="caret-down" icon="filter" text="Filter by owner" />
    </div>
  );
}

AnchorButton#

AnchorButton renders an <a> element with button styles. Use it for navigation, not actions.

GitHub Disabled link

core/buttons/anchor.tsx

import { AnchorButton } from "@clawscale/react";

export default function ButtonsAnchor() {
  return (
    <>
      <AnchorButton href="https://github.com/prashantonomy/clawscalejs" target="_blank" endIcon="share" text="GitHub" />
      <AnchorButton disabled href="#" text="Disabled link" />
    </>
  );
}

Interactive playground#

Duplicate view

Props

ActiveDisabledLoadingFill

Variant

Intent

Align text

Size

View source on GitHub

Props interface#

Both components accept the HTML attributes of their element.

interface ButtonSharedProps extends ActionProps<HTMLElement>@clawscale/react

Props	Description
`active`	`boolean` = `false` If set to `true`, the button will display in an active state. This is equivalent to setting `className={Classes.ACTIVE}`.
`alignText`	`Alignment` = `Alignment.CENTER` Text alignment within button. By default, icons and text will be centered within the button. Passing `"start"` or `"end"` will align the button text to that side and push `icon` and `endIcon` to either edge. Passing `"center"` will center the text and icons together.
`children`	`React.ReactNode` Button contents.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`disabled`	`boolean` Whether this action is non-interactive. Inherited from `ActionProps`
`ellipsizeText`	`boolean` = `false` If set to `true`, the button text element will hide overflow text that does not fit into a single line and show a trailing ellipsis, similar to the `Text` component.
`endIcon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render after the text.
`fill`	`boolean` Whether this button should expand to fill its container.
`icon`	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render before the text. Inherited from `ActionProps`
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`large`deprecated	`boolean` = `false` Whether this button should use large styles. use `size="large"` instead.
`loading`	`boolean` = `false` If set to `true`, the button will display a centered loading spinner instead of its contents and the button will be disabled (_even if_ `disabled={false}`). The width of the button is not affected by the value of this prop.
`minimal`deprecated	`boolean` = `false` Whether this button should use minimal styles. use `variant="minimal"` instead
`onClick`	`(event: React.MouseEvent<T>) => void` Click event handler. Inherited from `ActionProps`
`onFocus`	`(event: React.FocusEvent<T>) => void` Focus event handler. Inherited from `ActionProps`
`outlined`deprecated	`boolean` = `false` Whether this button should use outlined styles. use `variant="outlined"` instead
`rightIcon`deprecated	`IconName \| MaybeElement` Name of a Blueprint UI icon (or an icon element) to render after the text. Use `endIcon` instead
`size`	`Size` = `"medium"` The size of the button.
`small`deprecated	`boolean` = `false` Whether this button should use small styles. use `size="small"` instead.
`text`	`React.ReactNode` Action text. Can be any single React renderable. Inherited from `ActionProps`
`textClassName`	`string` Class name(s) to apply to the text span element.
`type`	`"submit" \| "reset" \| "button"` = `"button"` HTML `type` attribute of button. Accepted values are `"button"`, `"submit"`, and `"reset"`. Note that this prop has no effect on `AnchorButton`; it only affects `Button`.
`variant`	`ButtonVariant` = `"solid"` Visual style variant for the button. "minimal" renders a button without background styling, "outlined" adds a border without a fill, and "solid" (default) renders a button with background fill styling.