Primary button component with support for variants, colors, sizes, icons, and loading states. Can render as a button or anchor element.
Basic Usage
import DButton from '@dynamic-framework/ui-react';
function App() {
return (
<DButton
text="Click me"
color="primary"
onClick={() => console.log('Clicked!')}
/>
);
}
Props
color
ComponentColor
default:"primary"
Button color theme (primary, secondary, success, danger, warning, info, etc.)
Button size - ‘sm’ or ‘lg’
Button variant - ‘outline’ or ‘link’
Shows loading spinner when true
Text to display during loading state
Aria label for loading state
Icon name to display at start of button
Icon name to display at end of button
If provided, renders as an anchor tag instead of button
Link target attribute (when used with href)
type
ButtonType
default:"button"
Button type - ‘button’, ‘submit’, or ‘reset’
Variants
<DButton text="Primary" color="primary" />
<DButton text="Secondary" color="secondary" />
<DButton text="Success" color="success" />
<DButton text="Danger" color="danger" />
<DButton text="Primary" color="primary" variant="outline" />
<DButton text="Secondary" color="secondary" variant="outline" />
<DButton text="Success" color="success" variant="outline" />
<DButton text="Danger" color="danger" variant="outline" />
<DButton text="Link Button" color="primary" variant="link" />
<DButton text="Danger Link" color="danger" variant="link" />
With Icons
<DButton
text="Save"
iconStart="Save"
color="primary"
/>
<DButton
text="Next"
iconEnd="ArrowRight"
color="primary"
/>
<DButton
text="Download"
iconStart="Download"
iconStartMaterialStyle={true}
color="success"
/>
Loading State
<DButton
text="Submit"
loading={isSubmitting}
loadingText="Submitting..."
color="primary"
/>
As Link
<DButton
text="Visit Page"
href="/page"
target="_blank"
rel="noopener noreferrer"
color="primary"
/>
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;
}
Basic Usage
import DButtonIcon from '@dynamic-framework/ui-react';
function App() {
return (
<DButtonIcon
icon="Settings"
ariaLabel="Open settings"
color="primary"
onClick={() => console.log('Settings clicked')}
/>
);
}
Props
Accessible label for screen readers (highly recommended)
color
ComponentColor
default:"primary"
Button color theme
Button size - ‘sm’ or ‘lg’
Button variant - ‘outline’ or ‘link’
Shows loading spinner when true
Visual state - ‘focus-visible’, ‘hover’, ‘active’, or ‘disabled’
Whether to stop event propagation on click
If provided, renders as anchor tag
Examples
Basic
Sizes
Variants
Loading
<DButtonIcon icon="Search" ariaLabel="Search" />
<DButtonIcon icon="Edit" ariaLabel="Edit" color="primary" />
<DButtonIcon icon="Delete" ariaLabel="Delete" color="danger" />
<DButtonIcon icon="Plus" ariaLabel="Add" size="sm" />
<DButtonIcon icon="Plus" ariaLabel="Add" />
<DButtonIcon icon="Plus" ariaLabel="Add" size="lg" />
<DButtonIcon icon="Settings" ariaLabel="Settings" variant="outline" />
<DButtonIcon icon="Info" ariaLabel="Info" variant="link" />
<DButtonIcon
icon="Save"
ariaLabel="Saving"
loading={true}
loadingAriaLabel="Saving changes"
/>
TypeScript Interface
type Props =
& BaseProps
& FamilyIconProps
& {
id?: string;
icon: string;
size?: ComponentSize;
variant?: ButtonVariant;
color?: ComponentColor;
state?: InputState;
type?: ButtonType;
loading?: boolean;
loadingAriaLabel?: string;
ariaLabel?: string;
stopPropagationEnabled?: boolean;
disabled?: boolean;
href?: string;
target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
onClick?: (event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
};