Get Started

    Components

      Overview

      The Button component is a core element of user interaction in any application. It can be used to trigger actions, submit forms, or navigate users to different parts of your app. The component is highly customizable, offering various styles, sizes, and colors to suit your design needs.

      Variants

      The Button component supports several color variants to fit different design contexts. The available colors are:

      • Filled: A standard button with a solid background color, suitable for primary actions.
      • Tonal: A softer, more subdued button style.
      • Outlined: A button with a border and no background, ideal for secondary actions.
      • Elevated: A button with a shadow, giving it a raised appearance.
      • Text: A minimal button with no background or border, often used for inline actions.

      Sizes

      The Button component also supports different sizes to fit various contexts, such as compact buttons for toolbars or larger buttons for prominent actions. The available sizes include:

      • Small: For compact spaces or less prominent actions.
      • Medium: The default size, suitable for most use cases.
      • Large: For actions that require more emphasis.

      Shapes

      The Button component can also be styled with different shapes to enhance its appearance and fit your design language. The available shapes include:

      • Rounded: A button with rounded corners for a softer look.
      • Square: A button with sharp corners for a more modern, minimalistic appearance.

      States

      The Button component supports various states to indicate its current interaction status. These states include:

      • Default: The normal state of the button.
      • Disabled: The state when the button is not interactive, often grayed out to indicate it cannot be clicked.
      • Toggle: A special state that can be used to indicate a input toggle, such as a checkbox or switch. This state can be controlled via the htmlFor prop to link it with an input element.

      API Reference

      Button

      A versatile button component that can render as a button, a (anchor), or label element depending on the props provided.

      Props

      NameTypeDefaultDescription
      variant"elevated" | "filled" | "tonal" | "outlined" | "text""filled"The visual variant of the button
      shape"round" | "square""round"The shape style of the button
      size"extrasmall" | "small" | "medium" | "large" | "extralarge""small"The size of the button
      ripplebooleantrueWhether to show ripple effect on interaction
      childrenReact.ReactNodeRequiredThe content to display in the button

      Conditional Props

      The component accepts different props based on its intended use:

      • As Button: Accepts all standard HTML button element props
      • As Link: When href prop is provided, accepts all standard HTML a element props
      • As Label: When htmlFor prop is provided, accepts all standard HTML label element props