Button

Renders either a <button> element or a Next.js <Link> depending on the type prop. Styled via the button utility class from @dbt-labs/web-tailwind.

Variants

button-variants

Sizes

button-sizes

Dark background

button-dark

As a link

When type="link", the component renders as a Next.js <Link>. A link prop (the href) is required — the button renders nothing if omitted.

button-link

Go to getdbt.com

Disabled

button-disabled

Import

import { Button } from "@dbt-labs/web-ui/button";

Usage

// Button element
<Button type="button" variant="primary" size="medium">
  Click me
</Button>
 
// Link element
<Button type="link" link="/docs" variant="secondary">
  Read the docs
</Button>

Props

Prop	Type	Default	Description
type	"link" \| "button" \| "submit"	"link"	Renders as a Next.js Link ("link"), a <button> ("button"), or a submit button ("submit"). When "link", the link prop is required.
variant	"primary" \| "secondary" \| "tertiary" \| "text"	"primary"	Visual style variant.
size	"small" \| "medium" \| "large"	"medium"	Controls padding and font size.
link	string	—	The href when type="link". Required — button renders null without it.
text	string	—	Button label. Alternatively, pass children.
isDarkBg	boolean	false	Applies the dark-background variant of the button styles.
isDisabled	boolean	—	Disables the button and applies disabled styles.
opensInNewTab	boolean	false	Adds target="_blank" and rel="noreferrer" when type="link".
leadingIcon	React.ReactNode	—	Icon rendered before the label.
trailingIcon	React.ReactNode	—	Icon rendered after the label.
animateTrailingIcon	boolean	—	Slides the trailing icon right on hover.
triggerCTAModal	boolean	—	Dispatches an openCTAModal custom event on click instead of navigating.
className	string	—	Additional Tailwind classes merged onto the element.