Anchor: Sizing: Tiny

Ready

HTML
View
Context
Assets
Info
Notes


        
        
        <style>
    .index__anchor___3KlfE {
        background-color: transparent;
        color: #1779ba;
        cursor: pointer;
        line-height: inherit;
        text-decoration: none;
    }
    
    .index__anchor___3KlfE:hover,
    .index__anchor___3KlfE:focus {
        color: #1468a0;
    }
    
    .index__button___3D3Cg {
        display: inline-block;
        vertical-align: middle;
        margin: 0 0 1rem 0;
        padding: 0.85em 1em;
        -webkit-appearance: none;
        border: 1px solid transparent;
        border-radius: 0;
        transition: background-color 0.25s ease-out, color 0.25s ease-out;
        font-size: 0.9rem;
        line-height: 1;
        text-align: center;
        cursor: pointer;
        background-color: #1779ba;
        color: #fefefe;
    }
    
    [data-whatinput='mouse'] .index__button___3D3Cg {
        outline: 0;
    }
    
    .index__button___3D3Cg:hover,
    .index__button___3D3Cg:focus {
        background-color: #14679e;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__tiny___2Sy8s {
        font-size: 0.6rem;
    }
    
    .index__button___3D3Cg.index__small___1dPUD {
        font-size: 0.75rem;
    }
    
    .index__button___3D3Cg.index__large___W9JoR {
        font-size: 1.25rem;
    }
    
    .index__button___3D3Cg.index__expanded___2ZeWM {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-left: 0;
    }
    
    .index__button___3D3Cg.index__primary___1k85F {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__primary___1k85F:focus {
        background-color: #126195;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__secondary___12AKQ {
        background-color: #767676;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__secondary___12AKQ:focus {
        background-color: #5e5e5e;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__success___1LQ1d {
        background-color: #3adb76;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__success___1LQ1d:focus {
        background-color: #22bb5b;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__warning___1rgyQ {
        background-color: #ffae00;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__warning___1rgyQ:focus {
        background-color: #cc8b00;
        color: #0a0a0a;
    }
    
    .index__button___3D3Cg.index__alert___3q8Rw {
        background-color: #cc4b37;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__alert___3q8Rw:focus {
        background-color: #a53b2a;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge {
        border: 1px solid #1779ba;
        color: #1779ba;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge,
    .index__button___3D3Cg.index__hollow___3pmge:hover,
    .index__button___3D3Cg.index__hollow___3pmge:focus {
        background-color: transparent;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge:hover,
    .index__button___3D3Cg.index__hollow___3pmge:focus {
        border-color: #0c3d5d;
        color: #0c3d5d;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F {
        border: 1px solid #1779ba;
        color: #1779ba;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__primary___1k85F:focus {
        border-color: #0c3d5d;
        color: #0c3d5d;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ {
        border: 1px solid #767676;
        color: #767676;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__secondary___12AKQ:focus {
        border-color: #3b3b3b;
        color: #3b3b3b;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d {
        border: 1px solid #3adb76;
        color: #3adb76;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__success___1LQ1d:focus {
        border-color: #157539;
        color: #157539;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ {
        border: 1px solid #ffae00;
        color: #ffae00;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__warning___1rgyQ:focus {
        border-color: #805700;
        color: #805700;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw {
        border: 1px solid #cc4b37;
        color: #cc4b37;
    }
    
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__hollow___3pmge.index__alert___3q8Rw:focus {
        border-color: #67251a;
        color: #67251a;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei,
    .index__button___3D3Cg[disabled] {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei:hover,
    .index__button___3D3Cg.index__disabled___2nrei:focus,
    .index__button___3D3Cg[disabled]:hover,
    .index__button___3D3Cg[disabled]:focus {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F,
    .index__button___3D3Cg[disabled].index__primary___1k85F {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__primary___1k85F:focus,
    .index__button___3D3Cg[disabled].index__primary___1k85F:hover,
    .index__button___3D3Cg[disabled].index__primary___1k85F:focus {
        background-color: #1779ba;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__secondary___12AKQ:focus,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ:hover,
    .index__button___3D3Cg[disabled].index__secondary___12AKQ:focus {
        background-color: #767676;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d,
    .index__button___3D3Cg[disabled].index__success___1LQ1d {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__success___1LQ1d:focus,
    .index__button___3D3Cg[disabled].index__success___1LQ1d:hover,
    .index__button___3D3Cg[disabled].index__success___1LQ1d:focus {
        background-color: #3adb76;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__warning___1rgyQ:focus,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ:hover,
    .index__button___3D3Cg[disabled].index__warning___1rgyQ:focus {
        background-color: #ffae00;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw {
        opacity: 0.25;
        cursor: not-allowed;
    }
    
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw:hover,
    .index__button___3D3Cg.index__disabled___2nrei.index__alert___3q8Rw:focus,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw:hover,
    .index__button___3D3Cg[disabled].index__alert___3q8Rw:focus {
        background-color: #cc4b37;
        color: #fefefe;
    }
    
    .index__button___3D3Cg.index__dropdown___3ggQf::after {
        display: block;
        width: 0;
        height: 0;
        border: inset 0.4em;
        content: '';
        border-bottom-width: 0;
        border-top-style: solid;
        border-color: #fefefe transparent transparent;
        position: relative;
        top: 0.4em;
        display: inline-block;
        float: right;
        margin-left: 1em;
    }
    
    .index__button___3D3Cg.index__arrow-only___uTRlu::after {
        top: -0.1em;
        float: none;
        margin-left: 0;
    }
</style>
<a href="#" class="index__button___3D3Cg index__tiny___2Sy8s index__anchor___3KlfE">Tiny</a>


        import React from 'react';
import Anchor from 'fain/controls/Anchor';

export default function ButtonExample(props) {
  return (
    <Anchor
      href="#"
      size={props.size}
    >{props.children}</Anchor>
  );
}


        {
  "children": "Tiny",
  "size": "tiny"
}

File:

Content:


                                // @flow

import classNames from 'classnames';
import React from 'react';

import BaseAnchor from '../../globals/Anchor';

import styles from '../Button/index.scss';

type Props = {
  className: ClassName,
  disabled: boolean,
  expanded: boolean,
  size: 'tiny' | 'small' | 'default' | 'large',
};

function Anchor(props: Props) {
  const buttonCN = classNames(
    props.className,
    styles.button,
    styles[props.size],
    {
      disabled: props.disabled,
      expanded: props.expanded,
    },
  );

  return (
    <BaseAnchor
      {...props}
      ariaDisabled={props.disabled}
      className={buttonCN}
    />
  );
}

Anchor.defaultProps = {
  expanded: false,
  size: 'default',
};

export default Anchor;

URL: /components/raw/anchor/index.jsx
Filesystem Path: src/controls/Anchor/index.jsx
Size: 721 Bytes

Handle: @anchor--tiny
Variants (2): default, tiny
Preview:
- With layout
- Component only
Filesystem Path: src/controls/Anchor/Anchor.react

There are no notes for this item.