LxBadge

Visão geral

O componente LxBadge permite personalizar um badge, que é original do SEEDs – Design System da Linx. Ele suporta diferentes propriedades para customização e slots.

Informação

Destaque primário

Aviso leve

Algo errado aqui

Sucesso!

Essa pode selecionar

Clique para visualizar o código

<script setup>
import { ref } from 'vue';
import { LxBadge } from '@lde/lxcomponents';

const badgeSelectable = ref(false);
</script>

<template>
	<div class="d-flex gap-1">
		<LxBadge id="badge-default" label="Informação" size="sm" />
		<LxBadge id="badge-primary" label="Destaque primário" size="sm" severity="primary" />
		<LxBadge id="badge-warning" label="Aviso leve" size="sm" severity="warning" />
		<LxBadge id="badge-danger" label="Algo errado aqui" size="sm" severity="danger" />
		<LxBadge id="badge-success" label="Sucesso!" size="sm" severity="success" />
		<LxBadge id="badge-selectable" v-model="badgeSelectable" label="Essa pode selecionar" size="sm" selectable />
	</div>
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
modelValue	Indica se o badge está selecionado (usado quando selectable é verdadeiro).	Boolean	false
id	Identificador único do badge.	String	''
label	Rótulo do badge.	String	''
size	Tamanho do badge ('sm', 'md', 'lg').	String	'md'
severity	Severidade do badge ('default', 'primary', 'danger', 'warning', 'success').	String	'primary'
selectable	Indica se o badge é selecionável.	Boolean	false
disabled	Indica se o badge está desabilitado (usado quando selectable é verdadeiro).	Boolean	false
outlined	Indica se o badge deve ser exibido apenas com a borda.	Boolean	false

Slots

Nome	Descrição
default	Conteúdo personalizado para o rótulo do badge.
label-content	Conteúdo personalizado para o rótulo do badge.

Classes Padrão

O componente LxBadge utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do badge usando ::v-deep com a classe desejada.

Nome	Descrição
lx-badge	Classe base do badge.
lx-badge-label	Classe do rótulo do badge.
lx-badge-size--sm	Classe para o tamanho pequeno do badge.
lx-badge-size--md	Classe para o tamanho médio do badge.
lx-badge-size--lg	Classe para o tamanho grande do badge.
lx-badge-severity--default	Classe para a severidade padrão do badge.
lx-badge-severity--primary	Classe para a severidade primária do badge.
lx-badge-severity--danger	Classe para a severidade de perigo do badge.
lx-badge-severity--warning	Classe para a severidade de aviso do badge.
lx-badge-severity--success	Classe para a severidade de sucesso do badge.
lx-badge-outlined	Classe para o estilo outlined do badge.
lx-badge-selectable	Classe para o estilo selecionável do badge.
lx-badge-disabled	Classe para o estilo desabilitado do badge.

Exemplo de Personalização

Você pode personalizar o estilo do botão utilizando as classes padrão com o seletor ::v-deep. Veja um exemplo de como alterar o estilo do rótulo do botão:

Clique para visualizar o código

::v-deep .lx-badge-label {
  color: red;
}

Playground

Id:

Rótulo:

Severidade:DefaultPrimarySuccessWarningDanger

Tamanho:SmallMediumLarge

Selecionável

Desabilitado

Outlined

Exemplo de Badge