Tipos y colores
Code Block | ||
---|---|---|
| ||
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
document.getElementById('hello-example')
); |
Tamaños
Interaction states
Estado activo
Estado desactivado
Grupos de botones
DropdownLos botones son elementos en los que se puede hacer clic y que se utilizan para desencadenar acciones. Comunican llamadas a la acción al usuario y permiten a los usuarios interactuar con las páginas de diversas formas. Las etiquetas de los botones expresan qué acción ocurrirá cuando el usuario interactúe con ellos.
Cuándo usar
Utilice botones para comunicar las acciones que los usuarios pueden realizar y permitirles interactuar con la página. Cada página debe tener un botón principal y las llamadas a la acción restantes deben representarse como botones de menor énfasis.
Tipos y Propósito
Primario
Para el llamado a la acción principal en la página. Los botones primarios solo deben aparecer una vez por pantalla (sin incluir el encabezado de la aplicación o en un diálogo modal).
Secundario
Para acciones secundarias en cada página; estos solo se pueden usar junto con un botón principal.
Ghost
Para acciones menos destacadas; Los botones fantasma se pueden utilizar de forma aislada o combinados con un botón principal cuando hay varias llamadas a la acción.