@leafygreen-ui/icon-button
LeafyGreen UI Kit Icon Buttons
Last updated 8 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/icon-button 
SYNC missed versions from official npm registry.

IconButton

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/icon-button

NPM

npm install @leafygreen-ui/icon-button

Example

import EllipsisIcon from '@leafygreen-ui/icon/dist/Ellipsis';
import IconButton from '@leafygreen-ui/icon-button';

<IconButton darkMode={true} aria-label="Some Menu">
  <EllipsisIcon />
</IconButton>;

Output HTML

<button aria-disabled="false" class="leafygreen-ui-194rp0y" aria-label="Some Menu>
  <div class="leafygreen-ui-1rvdyoi">
    <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
      <g
        id="Ellipsis-Copy"
        stroke="none"
        stroke-width="1"
        fill="none"
        fill-rule="evenodd"
      >
        <path fill="#89989B"></path>
      </g>
    </svg>
  </div>
</button>

Properties

Prop Type Description Default
darkMode boolean Determines whether or not the IconButton will appear in darkMode. false
onClick function The event handler function for the 'onclick' event. Receives the associated event object as the first argument.
disabled boolean Disables the <IconButton /> false
href string If a href is supplied, the component renders inside of an a tag instead of inside of a button tag.
className string Adds a className to the class attribute on the container element.
children node Content rendered inside of the <IconButton /> component
size 'default', 'large', 'xlarge' Determines the size of the IconButton 'default'
active boolean Determines whether the <IconButton /> will appear active false
aria-label or aria-labelledby string One of these must be provided. See note below
... native anchor or button attributes Any other properties will be spread on the rendered HTML element or component.

Special Case: Aria Labels

Either aria-label or aria-labelledby must be provided a string, or there will be a console error. This is to ensure that screenreaders have a description for what the button does, since the button itself doesn't contain any text.

Any other properties will be spread on the container element.

Current Tags

  • 9.1.1                                ...           latest (8 days ago)

40 Versions

  • 9.1.1                                ...           8 days ago
  • 9.1.0                                ...           2 months ago
  • 9.0.1                                ...           3 months ago
  • 9.0.0                                ...           3 months ago
  • 8.0.2                                ...           4 months ago
  • 8.0.1                                ...           4 months ago
  • 8.0.0                                ...           4 months ago
  • 7.0.6                                ...           4 months ago
  • 7.0.5                                ...           5 months ago
  • 7.0.4                                ...           5 months ago
  • 7.0.3                                ...           5 months ago
  • 7.0.2                                ...           5 months ago
  • 7.0.1                                ...           5 months ago
  • 7.0.0                                ...           5 months ago
  • 6.1.4                                ...           5 months ago
  • 6.1.3                                ...           5 months ago
  • 6.1.2                                ...           6 months ago
  • 6.1.1                                ...           6 months ago
  • 6.1.0                                ...           6 months ago
  • 6.0.1                                ...           7 months ago
  • 6.0.0                                ...           7 months ago
  • 5.0.5                                ...           7 months ago
  • 5.0.4                                ...           8 months ago
  • 5.0.3                                ...           8 months ago
  • 5.0.2                                ...           9 months ago
  • 5.0.1                                ...           9 months ago
  • 5.0.0                                ...           9 months ago
  • 4.1.6                                ...           10 months ago
  • 4.1.5                                ...           10 months ago
  • 4.1.4                                ...           10 months ago
  • 4.1.3                                ...           a year ago
  • 4.1.2                                ...           a year ago
  • 4.1.1                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.0.1                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.0.0                                ...           a year ago

Copyright 2014 - 2017 © taobao.org |