Components
Button

Button

The Button component is a versatile button that can be customized with various properties. It can be used for different purposes such as form submissions, actions, or links.

Examples

Basic Usage

<Widget
	src='flashui.near/widget/Button'
	props={{ text: 'Click Me' }}
/>

Background color

<Widget
	src='flashui.near/widget/Button'
	props={{ text: 'Click Me', background: '#ab0328' }}
/>

Props

The Button component accepts the following props:

  • background (string, optional): The background color of the button. Defaults to #1e66f5.

  • variant (string, optional): The button variant. Can be one of "filled" (default), "outlined," or "text."

  • color (string, optional): The text color of the button. Defaults to #ffffff.

  • padding (string, optional): The padding of the button. Defaults to .5rem 1rem.

  • radius (string, optional): The border radius of the button. Defaults to .5rem.

  • disable (boolean, optional): Disables the button if true. Defaults to false.

  • loading (boolean, optional): Indicates whether the button is in a loading state. Defaults to false.

  • text (string, required): The text to be displayed on the button.

Behavior

  • If the disable prop is set to true, the button will be disabled and have a different appearance.

  • The variant prop allows you to choose between different button styles:

    • "filled": A filled button with customizable hover effect.
    • "outlined": An outlined button with customizable hover effect.
    • "text": A text button with customizable hover effect.

  • When the button is hovered over, it may change its appearance based on the variant and disable props.

ContainerCard