ActionButton

Os action buttons permitem que os usuários executem uma ação dentro de um contexto. Podem ser usados como itens de navegação ou para opções semelhantes baseadas em tarefas em um fluxo de trabalho. São ideias para interfaces em que os botões não devem chamar muita atenção.

API

Showcase

Migração

Utilização

Copy Snippet Button

Playground

<ActionButton onClick={() => alert('Hello world!')}>
  <EditIcon />
</ActionButton>

<ActionButton onClick={() => alert('Hello world!')}>
  <EditIcon />
</ActionButton>

Propriedades

Nome (* = obrigatório)	Tipo	Valores	Descrição
children	ReactNode	`—`	Conteúdo interno.
contextual	boolean	`true` `false` (default)	Quando `true` o botão tem seu tamanho diminuído para ser utilizado em contextos fechados, por exemplo em tabelas.
modifier	ActionButtonModifier	`none` (default) `inverted` `fill`	Quando `inverted`, aplica estilos para serem usados em um contexto de “fundo inverso”, i.e., um fundo colorido. Quando `fill`, aplica fundo sólido para o botão, para quando for necessário sobrepor outros elementos.
quiet	boolean	`true` `false` (default)	Quando `true`, o botão não terá a borda e o fundo aparecerá apenas no hover do botão.
rounded	boolean	`true` `false` (default)	Quando `true`, o botão será redondo.
title *	string	`—`	O título do botão para ser usado em títulos, rótulos e tooltip.

Métodos

Nome (* = obrigatório)	Tipo	Descrição
onClick	function	Função chamada quando o componente é clicado. `event` é o objeto de evento do click.

Nome (* = obrigatório)

Tipo

Descrição

onClick

function

Função chamada quando o componente é clicado.

event é o objeto de evento do click.