Tango UI

Button

The Button component is used to trigger an action or event, such as submitting a form, opening a
dialog, canceling an action, or performing a delete operation.

Default

PreviewCode

Success

PreviewCode

Danger

PreviewCode

Transparent

PreviewCode

Material

PreviewCode

Neumorphism

PreviewCode

Diasbled

PreviewCode

Usage

Basic Loading

loading={true}

loading="light"

loading="dark"

Array Format Loading

Use array format [showLoading, type] for dynamic control

loading={[true, "dark"]}

loading={[true, "light"]}

Loading States Reference

Value	Type	Color	Description
`true`	Boolean	Dark	Default dark loading spinner
`"light"`	String	Light	Light theme (Dark color loading spinner)
`"dark"`	String	Dark	Dark theme (Light color loading spinner)
`[true, "dark"]`	Array	Dark	Array format with dark spinner
`[true, "light"]`	Array	Light	Array format with light spinner
`[false, "dark"]`	Array	-	Loading disabled

Important Notes:

• When loading=true, it defaults to dark spinner
• Array format is useful for dynamic state control: [isLoading, "dark"] (useState)
• The first element in array controls visibility (boolean)
• The second element in array controls spinner type ("light" or "dark")
• If second element is omitted or invalid, defaults to "light"

Icon

PreviewCode

Usage

Basic Icon Usage

icon="/setting.png"

icon={<FiSettings />}

icon={FiSettings}

icon={<FiSearch />}(Icon-only button)

Icon with Loading State

icon={<FiUpload />}
loading={[true, "dark"]}

Note:

When loading is active, the icon will be replaced by the loading spinner.

Supported Icon Types

Type	Format	Example	Description
String	Image path	`"/icons/user.png"`	Renders as `<img>` tag
React Element	JSX	`<FiHome />`	Cloned with additional props
React Component	Component reference	`FiHome`	Rendered as component

Real-world Examples

Social Login Button:

icon="/google.png"
type="default"

Important Notes:

• Icon size is automatically adjusted based on button size
• Custom styles on icon elements are preserved and merged
• When loading is active, icon is replaced by loading spinner
• For React elements, className and style props are intelligently merged
• All icon types automatically get the .btn-icon CSS class

Props

Universal Props

Prop	Type	Accepted Values	Description	Default	Version
type	string	default \| transparent \| danger \| success	Specifies the button style. Supports four predefined types. Custom styles can be applied via the "sx" prop.	default	-
size	string	small \| medium \| large \| huge	Specifies the button size. Supports four preset sizes. Custom sizes can be defined using the "sx" prop.	medium	-
sx	object	object	Inline styles for customizing the button appearance. Note: Inline styles defined via the "style" prop take precedence over "sx".	{}	-
disabled	boolean	true \| false	Disables the button if set to true.	false	-
outline	boolean	true \| false	Applies an outline style to the button.	false	-
enu	boolean	true \| false	Applies neumorphic styling when enabled.	false	0.3.0
onClick	(event: React.MouseEvent<HTMLElement, MouseEvent>) => void	-	Callback function triggered when the button is clicked.	-	-
className	string	-	Custom CSS class name(s) applied to the button.	-	-
loading	boolean	true \| false	Indicates that the button is loading.	true	0.6.0
icon	object	object	Icon to display in the button.	-	0.6.0
iconPosition	string	left \| right	Position of the icon within the button.	left	0.6.0
rippleColor	string	rgba\|rgb\|#hex	customize the color of the ripple effect.	rgba(255, 255, 255, 0.6)	0.8.3

On This Page

Button

Props