# svelma-pro
可点击按钮

# Buttons

## 可点击按钮

Codesandbox

    <Button type="is-primary" on:click={() => counter++}>
      Click!: {counter}
    </Button>

状态,样式和类型

Codesandbox

    <div class="buttons">
      <Button type="is-primary">Primary</Button>
      <Button type="is-success">Success</Button>
      <Button type="is-danger">Danger</Button>
      <Button type="is-warning">Warning</Button>
      <Button type="is-info">Info</Button>
      <Button type="is-link">Link</Button>
      <Button type="is-light">Light</Button>
      <Button type="is-dark">Dark</Button>
      <Button type="is-text">Text</Button>
    </div>
    <div class="buttons">
      <Button disabled>Disabled</Button>
      <Button type="is-primary" loading>Loading</Button>
      <Button type="is-success" rounded>Rounded</Button>
      <Button type="is-info" outline>Outlined</Button>
    </div>
    <div class="buttons">
      <div class="notification is-primary">
        <Button type="is-primary" inverted>Inverted</Button>
        <Button type="is-primary" inverted outlined>Invert Outlined</Button>
      </div>
    </div>
    <div class="buttons">
      <Button type="is-primary" nativeType="submit">Submit</Button>
      <Button type="is-primary" nativeType="reset">Reset</Button>
    </div>

Sizes

Codesandbox

    <div class="buttons">
      <Button size="is-small">Small</Button>
      <Button>Default</Button>
      <Button size="is-medium">Medium</Button>
      <Button size="is-large">Large</Button>
    </div>

Icons

Codesandbox

    <div class="buttons">
      <Button>
        <Icon icon="bold" />
      </Button>
      <Button>
        <Icon icon="underline" />
      </Button>
      <Button>
        <Icon icon="italic" />
      </Button>
    </div>
    <div class="buttons">
      <Button iconPack="fab" iconLeft="github">GitHub</Button>
      <Button type="is-primary" iconPack="fab" iconLeft="twitter">Twitter</Button>
      <Button type="is-success" iconPack="fa" iconLeft="check">Save</Button>
      <Button type="is-danger" outline iconPack="fa" iconRight="times">Delete</Button>
    </div>
    <div class="buttons">
      <Button size="is-small" iconPack="fab" iconLeft="github">GitHub</Button>
      <Button iconLeft="github" iconPack="fab">GitHub</Button>
      <Button size="is-medium" iconPack="fab" iconLeft="github">GitHub</Button>
      <Button size="is-large" iconPack="fab" iconLeft="github">GitHub</Button>
    </div>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`tag` | 用于按钮的html标记 (选择 'a' or 'button') | String | ``button``, ``a`` | `button`
`type` | Type (color of control), optional | String | `is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger` | —
`size` | 按钮大小, optional | String | `is-small`, `is-medium`, `is-large` | —
`href` | 当tag为'a'时使用, optional | String | — | —
`nativeType` | 原生按钮类型, optional | String | `任何原生按钮类型 (button`, `submit`, `reset)` | —