@superlogica/togglebuttongroup NPM

COMPONENT TOGGLE BUTTON GROUP

Esse package contém o componente toggle button group da Superlógica para web/desktop, seguindo nossos Tokens e padrões.

Instalação:

npm install @superlogica/togglebuttongroup

Props

As props onClick e itens são obrigatórias, as demais nenhuma das props abaixo são obrigatórias e em caso de alguma props receber um valor inválido, o valor default daquela props será utilizado.

Props	Type	Default	Description
`size`	`String`	`medium`	aceita os tamanhos small, medium, large e xlarge.
`type`	`String`	`solid`	aceita os valores solid, outline e text
`color`	`String`	`neutral500`	deve conter o Token da cor que você deseja como fundo do botão, acesse os tokens de cor.
`gradient`	`String`	`null`	deve conter o Token do gradient que você deseja como fundo do botão, acesse os tokens de gradient.
`fullWidth`	`boolean`	`false`	aceita true ou false e trabalha em conjunto com a props `size`.
`shadow`	`boolean`	`false`	aceita true ou false a sombra exibida no component é gerada no Theme atual da aplicação.
`onClick`	`func`	`() => {}`	deve conter uma função que tratará o evento de click.
`itens`	`Array`	`[]`	deve conter um Array com as opções a serem apresentadas.

Uso

import ToggleButtonGroup from '@superlogica/togglebuttongroup';


    ...
        return (
            <ToggleButtonGroup color="blue500" size="small" 
                onClick={(e) => {
                    console.log(e.target.value);
                }} itens={
                [
                    {
                        name: "Mensal",
                        value: "mensal",
                        selected: true
                    },
                    {
                        name: "Anual",
                        value: "anual"
                    },
                    {
                        name: "Semestral",
                        value: "semestral"
                    },
                    {
                        name: "Diário",
                        value: "diario"
                    }
                ]
            }/>
        )
    ...
}