Button

The ty-button component is a fundamental building block in user interfaces, enabling users to interact with and trigger various actions and events.

Usage

You can use the ty-button component in your HTML code as follows:

Live Editor

<ty-button corner="sm" size="sm">
  <span class="material-icons md-18">start</span>
  Fill Button
</ty-button>

Result

Loading...

Filled Button

The filled variant of ty-button creates a solid, visually distinct button:

startFill Button

HTML

<ty-button variant="outlined">
  <span class="material-icons md-18">start</span>
  Fill Button
</ty-button>

JavaScript

<script>
  // Get a reference to the button
  const btn = document.querySelector('ty-button');

  // Listen for 'ty-click' event
  btn.addEventListener('ty-click', () => {
    alert('Button was clicked!');
  });

  // Programmatically trigger a click event
  btn.click();

  // Disable the button
  btn.disabled = true;

  // Change the button variant
  btn.variant = 'outlined';

  // Change the button color
  btn.color = 'neutral';

  // Change the button size
  btn.size = 'sm';
</script>

Outlined Button

The outlined variant of ty-button provides a button with an outlined border:

startFill Button

HTML

<ty-button variant="outlined">
  <span class="material-icons md-18">start</span>
  Fill Button
</ty-button>

Icon Button

The icon variant of ty-button allows you to create button icons without text:

start

HTML

<ty-button variant="outlined">
  <span class="material-icons md-18">start</span>
</ty-button>

API

The ty-button component accepts the following properties:

Properties

Name	Description	Type	Default
variant	button type	'filled', 'outlined', 'text', 'icon'	'filled'
color	button color	'neutral' ,'primary'	'primary'
size	size	'sm', 'md'	'md'
disabled	disable the button	'boolean'	'false'
corner	border radius	'none', 'xs', 'sm', 'md', 'lg'	'none'

Events

Name	Description
'ty-click'	Emit event when the button is clicked