nb-button-shadow

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

Loading component...

Installation

Yarn
yarn add @vlalg-nimbus/nb-buttons
NPM
npm install @vlalg-nimbus/nb-buttons

Usage

Vue 3
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')
Nuxt 3
import NbButtonsComponents from '@vlalg-nimbus/nb-buttons'
import "@vlalg-nimbus/nb-buttons/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbButtonsComponents)
})

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

Mode 1
<template>
  <NbButtonShadow />
</template>
Mode 2
<template>
  <nb-button-shadow />
</template>
Mode 3
<template>
  <nb-button-shadow></nb-button-shadow>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
tabIndexNumber0Defines the tab index. Set this property to make the button focusable by the keyboard.
hasTabIndexEnterBooleantrueEnables the button to be activated with the Enter key when focused.
hasTabIndexSpaceBooleantrueEnables the button to be activated with the Space key when focused.
ariaLabelString'Alternate Text Button'Defines the aria-label attribute for screen readers.
ariaAttrsObject{}Allows passing custom aria attributes as an object. Keys will automatically receive the aria- prefix. Example: { 'describedby': 'help-id', 'invalid': 'false' }
themeString'light'Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
borderRadiusNumber0Defines border-radius.
widthNumber86Defines button width.
paddingXNumber1Defines button padding-left and padding-right.
paddingYNumber0.2Defines button padding-top and padding-button.
disabledBooleanfalseDefines if the button is disabled
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the font-size
fontWeightNumber200Defines the font-weight
lightTextColorString'#333333'Defines the text color for light theme. Accepts Color name and Hex
lightTextColorHoverString'#000000'Defines the text color on hover for light theme. Accepts Color name and Hex
lightButtonColorString'#f5f5f5'Defines the button background color for light theme. Accepts Color name and Hex
lightButtonColorHoverString'#e0e0e0'Defines the button background color on hover for light theme. Accepts Color name and Hex
lightButtonShadowColorString'#cccccc'Defines the button shadow color for light theme. Accepts Color name and Hex
lightBorderColorString'#cccccc'Defines the border color for light theme. Accepts Color name and Hex
lightDisabledBgColorString'#dfdfd9'Defines the disabled background color for light theme. Accepts Color name and Hex
darkTextColorString'#ffffff'Defines the text color for dark theme. Accepts Color name and Hex
darkTextColorHoverString'#ffffff'Defines the text color on hover for dark theme. Accepts Color name and Hex
darkButtonColorString'#2d2d2d'Defines the button background color for dark theme. Accepts Color name and Hex
darkButtonColorHoverString'#3d3d3d'Defines the button background color on hover for dark theme. Accepts Color name and Hex
darkButtonShadowColorString'#555555'Defines the button shadow color for dark theme. Accepts Color name and Hex
darkBorderColorString'#555555'Defines the border color for dark theme. Accepts Color name and Hex
darkDisabledBgColorString'rgba(40, 42, 54, 1)'Defines the disabled background color for dark theme. Accepts Color name and Hex

Events

nameReturn typeDescription
clickednothingFired 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>
  <NbButtonShadow
    :nb-id="'nb-button-shadow-one'"
    :display="'b'"
    theme="light"
    :borderRadius="0"
    :tabIndex="0"
    :hasTabIndexEnter="true"
    :hasTabIndexSpace="true"
    ariaLabel="Botão com sombra"
    @clicked="logEvent()"
  >
    <template #content>
      Default Text
    </template>
  </NbButtonShadow>
</template>

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

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

Example

Light Theme (default)

<template>
  <NbButtonShadow
    nb-id="nb-button-shadow-light"
    display="b"
    theme="light"
    light-button-color="#dbeafe"
    light-button-color-hover="#bfdbfe"
    light-text-color="#1e40af"
    light-text-color-hover="#000000"
    light-button-shadow-color="#93c5fd"
    light-border-color="#93c5fd"
    :border-radius="0"
    :padding-x="1"
    :padding-y="0.2"
    @clicked="logEvent()"
  >
    <template #content>Default Text</template>
  </NbButtonShadow>
</template>

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

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

Dark Theme

<template>
  <NbButtonShadow
    nb-id="nb-button-shadow-dark"
    display="b"
    theme="dark"
    dark-button-color="#8b5cf6"
    dark-button-color-hover="#7c3aed"
    dark-text-color="#f3f4f6"
    dark-text-color-hover="#ffffff"
    dark-button-shadow-color="#a78bfa"
    dark-border-color="#a78bfa"
    :border-radius="0"
    :padding-x="1"
    :padding-y="0.2"
    @clicked="logEvent()"
  >
    <template #content>Default Text</template>
  </NbButtonShadow>
</template>

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

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