@govuk-react/button

Styled button component with configurable properties.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@govuk-react/button
Minified + gzip package size for @govuk-react/button in KB

Readme

Button

Import

  import Button from '@govuk-react/button';

Usage

Simple

import { Button } from 'govuk-react'

<Button>My button text</Button>

With Icon

import { ButtonArrow } from 'govuk-react'

<Button icon={<ButtonArrow />}>My button text</Button>

References:

TODO:

  • Remove cascade styling for nested elements, specifically svg
  • Consider ensuring text colour automatically switches between black/white based on WCAG guidance

Properties

Prop Required Default Type Description
buttonColour undefined string Override for default button colour
buttonHoverColour undefined string Override for default button hover colour,
which defaults to buttonColour darkened by 5%
buttonShadowColour undefined string Override for default button shadow colour,
which defaults to buttonColour darkened by 15%
buttonTextColour undefined string Override for default button text colour,
which defaults to govuk white
children true `````` node Button text
disabled false bool Renders a disabled button and removes pointer events if set to true
icon undefined node Button icon
start false bool Renders a large button if set to true

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.