0.2.0 • Published 5 years ago
@govuk-frederic/arrow-left v0.2.0
ArrowLeft
Import
import ArrowLeft from '@govuk-frederic/arrow-left';
Usage
Simple
<ArrowLeft />
Dark background
import { GREY_1 } from 'govuk-colours';
const darkBackground = {
backgroundColor: GREY_1,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={darkBackground}>
<ArrowLeft width={28} fill="white" />
</div>
Light background
import { WHITE } from 'govuk-colours';
const lightBackground = {
backgroundColor: WHITE,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={lightBackground}>
<ArrowLeft width={28} fill="black" />
</div>
Dark background & title
import { GREY_1 } from 'govuk-colours';
const darkBackground = {
backgroundColor: GREY_1,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={darkBackground}>
<ArrowLeft width={28} fill="white" color="white">
Back to previous page
</ArrowLeft>
</div>
Light background & title
import { WHITE } from 'govuk-colours';
const lightBackground = {
backgroundColor: WHITE,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={lightBackground}>
<ArrowLeft width={28} fill="black">
Back to previous page
</ArrowLeft>
</div>
Wrapped with anchor with title text
import { WHITE } from 'govuk-colours';
const lightBackground = {
backgroundColor: WHITE,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={lightBackground}>
<a href="http://example.com" style={{ color: '#005CA7' }}>
<ArrowLeft width={28} fill="black">
Back to previous page
</ArrowLeft>
</a>
</div>
Wrapped with anchor with title text on dark background
import { GREY_1 } from 'govuk-colours';
const darkBackground = {
backgroundColor: GREY_1,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={darkBackground}>
<a href="http://example.com" style={{ color: 'white' }}>
<ArrowLeft width={28} fill="white">
Back to previous page
</ArrowLeft>
</a>
</div>
Passing down onClick with title text
import { GREY_1 } from 'govuk-colours';
const darkBackground = {
backgroundColor: GREY_1,
minHeight: '320px',
minWidth: '320px',
padding: '20px',
};
<div style={darkBackground}>
<ArrowLeft width={28} fill="white" onClick={action('clicked arrow button')}>
Back to previous page
</ArrowLeft>
</div>
Properties
Prop | Required | Default | Type | Description |
---|---|---|---|---|
children | undefined | string | ||
color | undefined | string | ||
fill | BLUE | string | ||
onClick | undefined | func | ||
width | 20 | number |