Skip to main content

​
DButton

A versatile button component with support for loading states, icons, and link rendering.

​
Import

import { DButton } from '@dynamic-framework/ui-react';

​
TypeScript Interface

interface Props
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>,
  BaseProps,
  StartIconProps,
  EndIconProps {
  href?: string;
  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
  color?: ComponentColor;
  size?: ComponentSize;
  variant?: ButtonVariant;
  text?: string;
  loading?: boolean;
  loadingText?: string;
  loadingAriaLabel?: string;
}

type ComponentSize = 'sm' | 'lg';
type ButtonVariant = 'outline' | 'link';
type ComponentColor = string;

type StartIconProps = {
  iconStart?: string;
  iconStartDisabled?: boolean;
  iconStartFamilyClass?: string;
  iconStartFamilyPrefix?: string;
  iconStartAriaLabel?: string;
  iconStartTabIndex?: number;
  iconStartMaterialStyle?: boolean;
};

type EndIconProps = {
  iconEnd?: string;
  iconEndDisabled?: boolean;
  iconEndFamilyClass?: string;
  iconEndFamilyPrefix?: string;
  iconEndAriaLabel?: string;
  iconEndTabIndex?: number;
  iconEndMaterialStyle?: boolean;
};

type BaseProps = {
  style?: CSSProperties;
  className?: string;
  dataAttributes?: DataAttributes;
};

​
Props

​
href
string
If provided, renders the button as an anchor (<a>) element instead of a button.
​
target
string
Target attribute for anchor element (only applies when href is provided).
​
rel
string
Rel attribute for anchor element (only applies when href is provided).
​
color
string
default:"primary"
Color variant of the button. Accepts any valid color name (e.g., 'primary', 'success', 'danger').
​
size
'sm' | 'lg'
Size variant of the button.
​
variant
'outline' | 'link'
Visual variant of the button. 'outline' creates a bordered button, 'link' creates a text-only button.
​
text
string
Text content to display in the button. Alternative to using children.
​
loading
boolean
default:"false"
If true, displays a loading spinner and disables the button.
​
loadingText
string
Text to display next to the spinner when loading.
​
loadingAriaLabel
string
Accessible label for screen readers when button is in loading state.
​
disabled
boolean
default:"false"
If true, disables the button.
​
iconStart
string
Icon to display at the start of the button text.
​
iconStartFamilyClass
string
CSS class for the start icon font family.
​
iconStartFamilyPrefix
string
Prefix for the start icon font family.
​
iconStartMaterialStyle
boolean
Whether to use Material Design style for the start icon.
​
iconEnd
string
Icon to display at the end of the button text.
​
iconEndFamilyClass
string
CSS class for the end icon font family.
​
iconEndFamilyPrefix
string
Prefix for the end icon font family.
​
iconEndMaterialStyle
boolean
Whether to use Material Design style for the end icon.
​
type
'button' | 'submit' | 'reset'
default:"button"
HTML button type attribute.
​
onClick
(event: MouseEvent<HTMLButtonElement>) => void
Click event handler.
​
className
string
Additional CSS classes to apply to the button.
​
style
CSSProperties
Inline styles to apply to the button.
​
children
ReactNode
Content to display inside the button. Alternative to using text prop.

​
Usage Examples

​
Basic Button

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DButton text="Click Me" color="primary" />
  );
}

​
Color Variants

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-2">
      <DButton text="Primary" color="primary" />
      <DButton text="Success" color="success" />
      <DButton text="Danger" color="danger" />
      <DButton text="Warning" color="warning" />
      <DButton text="Info" color="info" />
    </div>
  );
}

​
Outline Variant

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-2">
      <DButton text="Outline Primary" color="primary" variant="outline" />
      <DButton text="Outline Success" color="success" variant="outline" />
      <DButton text="Outline Danger" color="danger" variant="outline" />
    </div>
  );
}

​
With Icons

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-2">
      <DButton
        text="Previous"
        color="primary"
        iconStart="arrow-left"
        iconStartFamilyClass="bi"
      />
      <DButton
        text="Next"
        color="primary"
        iconEnd="arrow-right"
        iconEndFamilyClass="bi"
      />
    </div>
  );
}

​
Loading State

import { DButton } from '@dynamic-framework/ui-react';
import { useState } from 'react';

export default function Example() {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <DButton
      text="Submit"
      color="primary"
      loading={loading}
      loadingText="Submitting..."
      onClick={handleClick}
    />
  );
}

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DButton
      text="Visit Dynamic"
      color="primary"
      href="https://dynamic.xyz"
      target="_blank"
      rel="noopener noreferrer"
    />
  );
}

​
Size Variants

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex align-items-center gap-2">
      <DButton text="Small" color="primary" size="sm" />
      <DButton text="Default" color="primary" />
      <DButton text="Large" color="primary" size="lg" />
    </div>
  );
}

​
Disabled State

import { DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-2">
      <DButton text="Disabled" color="primary" disabled />
      <DButton text="Disabled Outline" color="primary" variant="outline" disabled />
    </div>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us