Button
A prestyled button container with multiple variants and sizes that can wrap actions or links
Overview
This component is a versatile, prestyled container that provides consistent button styling across your application. It offers three visual variants and four size options to accommodate different use cases and hierarchies.
Variants
The Button component offers three distinct variants for different levels of visual emphasis and hierarchy: primary, secondary, and tertiary.
Sizes
Four size options are available to each variant to fit different contexts and layouts: lg, md, sm, and xs.
Interactive States
All button variants support hover, pressed, focus and disabled states with distinct visual highlights. Interact with the examples below to see each state.
Using as a Link
The asChild prop allows you to render button as an alternative element or as your own React component while preserving its styling. This is particularly useful for navigation links that should look like buttons.
When using asChild, the Button component must have exactly one child element. Multiple children will cause a React compilation error. The Button merges its props and styling with the single child element, which can be any component including Next.js Link, React Router Link, or custom components.
Using Icons
Buttons can include icons to enhance visual communication. Use the integral-button__icon-leading and integral-button__icon-trailing classnames to ensure proper sizing and spacing across all button sizes.
The integral-button__icon-leading and integral-button__icon-trailing classnames automatically handle icon sizing and spacing for each button size. The icons will scale appropriately from 1.6rem (xs/sm) to 2.4rem (lg) on desktop.
Import
import { Button } from '@im/integral/components/styled';Props
Prop
Type