deft-ui

# Button

Buttons with configurable type, size and customized icons.

# Import

import { button } from "deft-ui";

Vue.component(button.name, button);

# Example

Configure color

default primary danger
<template>
  <deft-button type="default">default</deft-button>
  <deft-button type="primary">primary</deft-button>
  <deft-button type="danger">danger</deft-button>
</template>
Expand Copy

Configure size

small

large
normal
<template>
  <deft-button type="primary" size="small">small</deft-button>
  <div></div>
  <br/>
  <deft-button type="primary" size="large">large</deft-button>
  <br/>
  <deft-button type="primary" size="normal">normal</deft-button>
</template>
Expand Copy

Disabled

disabled
<template>
  <deft-button type="primary" disabled>disabled</deft-button>
</template>
Expand Copy

Ghost button

plain
<template>
  <deft-button plain>plain</deft-button>
</template>
Expand Copy

With icon

back more
<template> 
  <deft-button icon="back">back</deft-button>
  <deft-button icon="more">more</deft-button>
</template>
Expand Copy

With custom icon

icon 
<template>
  <deft-button>
    <img src="/deft-ui/logo.png" height="20" width="20" slot="icon" />
    icon
  </deft-button>
</template>
Expand Copy

# API

option description type acceptable values default
plain if the button is a ghost button Boolean false
disabled if the button is disabled Boolean false
type type of the button String default, primary, danger default
size size of the button String small, normal, large normal
icon button icon String more, back

# Slot

name description
- displayed text
icon custom icon

← Cell →