nb-button-normal

This is a normal button component for Vue.js 3+.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-buttons

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
import "@vlalg-nimbus/nb-buttons/dist/style.css";

const app = createApp(App)
app.use(NbButtonsComponents)
app.mount('#app')

To use, simply call the component, in this case it will be NbButtonNormal or nb-button-normal.

Mode 1

<template>
  <NbButtonNormal />
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
display	String	'b'	Defines the display type. Accepts ib and b.
tabIndex	Number	0	Defines the tab index. Set this property to make the button focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Enables the button to be activated with the Enter key when focused.
hasTabIndexSpace	Boolean	true	Enables the button to be activated with the Space key when focused.
ariaLabel	String	'Alternate Text Button'	Defines the aria-label attribute for screen readers.
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix. Example: `{ 'describedby': 'help-id', 'invalid': 'false' }`
theme	String	'light'	Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
showBorder	Boolean	true	Defines if the border should be shown.
borderRadius	Number	0.375	Defines border-radius.
lightButtonColor	String	'#f5f5f5'	Defines the button background color for light theme. Accepts Color name and Hex
lightButtonColorHover	String	'#e0e0e0'	Defines the button background color on hover for light theme. Accepts Color name and Hex
lightTextColor	String	'#333333'	Defines the text color for light theme. Accepts Color name and Hex
lightTextColorHover	String	'#000000'	Defines the text color on hover for light theme. Accepts Color name and Hex
lightBorderColor	String	'#cccccc'	Defines the border color for light theme. Accepts Color name and Hex
lightBorderColorHover	String	'#bbbbbb'	Defines the border color on hover for light theme. Accepts Color name and Hex
lightDisabledBgColor	String	'#dfdfd9'	Defines the disabled background color for light theme. Accepts Color name and Hex
darkButtonColor	String	'#2d2d2d'	Defines the button background color for dark theme. Accepts Color name and Hex
darkButtonColorHover	String	'#3d3d3d'	Defines the button background color on hover for dark theme. Accepts Color name and Hex
darkTextColor	String	'#e0e0e0'	Defines the text color for dark theme. Accepts Color name and Hex
darkTextColorHover	String	'#ffffff'	Defines the text color on hover for dark theme. Accepts Color name and Hex
darkBorderColor	String	'#555555'	Defines the border color for dark theme. Accepts Color name and Hex
darkBorderColorHover	String	'#666666'	Defines the border color on hover for dark theme. Accepts Color name and Hex
darkDisabledBgColor	String	'rgba(40, 42, 54, 1)'	Defines the disabled background color for dark theme. Accepts Color name and Hex
width	Number	86	Defines button width.
paddingX	Number	1	Defines button padding-left and padding-right.
paddingY	Number	0.2	Defines button padding-top and padding-button.
disabled	Boolean	false	Defines if the button is disabled
fontFamily	String	"'Lato', sans-serif"	Defines the font-family
fontSize	String	'1.6em'	Defines the font-size
fontWeight	Number	200	Defines the font-weight
hasAnimation	Boolean	false	Defines if the button should have transition animation.
animationDuration	Number	0.3	Defines the animation duration.
animationDurationType	String	's'	Defines the animation duration type. Accepts ms and s.

Events

name	Return type	Description
clicked	nothing	Fired when the button is clicked, returns nothing.

Slot

The component has a slot called content where the content that will be manipulated must be passed. It has a default text (Default Text) in case the content does not pass through the slot.

<template>
  <!-- Example with light theme (default) -->
  <NbButtonNormal
    :nb-id="'nb-button-normal-one'"
    :display="'b'"
    theme="light"
    light-button-color="#dbeafe"
    light-button-color-hover="#bfdbfe"
    light-text-color="#1e40af"
    light-text-color-hover="#1e3a8a"
    light-border-color="#93c5fd"
    light-border-color-hover="#60a5fa"
    :show-border="true"
    :border-radius="0.375"
    :has-animation="true"
    :animation-duration="0.3"
    animation-duration-type="s"
    :tab-index="0"
    :has-tab-index-enter="true"
    :has-tab-index-space="true"
    aria-label="Botão normal"
    @clicked="logEvent()"
  >
    <template #content>
      Light Theme Button
    </template>
  </NbButtonNormal>

  <!-- Example with dark theme -->
  <NbButtonNormal
    :nb-id="'nb-button-normal-two'"
    :display="'b'"
    theme="dark"
    dark-button-color="#8b5cf6"
    dark-button-color-hover="#7c3aed"
    dark-text-color="#f3f4f6"
    dark-text-color-hover="#ffffff"
    dark-border-color="#a78bfa"
    dark-border-color-hover="#8b5cf6"
    :show-border="true"
    :border-radius="0.5"
    :padding-x="1.5"
    :padding-y="0.4"
    @clicked="logEvent()"
  >
    <template #content>
      Dark Theme Button
    </template>
  </NbButtonNormal>
</template>

<script setup>
defineOptions({
  name: 'CompNormal',
});

const logEvent = () => {
  console.log('clicked');
};
</script>

Nb Buttonsnb-button-gradient-border-to-background

Nb Buttonsnb-button-shadow