Fundamentals
These are some of the design tokens used across the Bitcoin Design Guide. You can find them here: https://www.bitcoinuikit.com/foundation. This section will only cover how to use them.
Typography Presets and Colors
You can use the presets and colors in any StyleSheet component or apply it directly inline within your style
prop. See below
How to use it
import { StyleSheet, Text, View } from 'react-native',
import { TypographyPresets, Colors } from 'etta-ui';
<View>
<Text style={styles.title}>This is a title</Text>
<Text style={styles.text}>Paragraph text</Text>
<Text style={{...TypographyPresets.Body3, color: Colors.red.base}}>Paragraph text</Text>
</View>
const styles = StyleSheet.create({
title: {
...TypographyPresets.Header2,
color: Colors.orange.base,
},
text: {
...TypographyPresets.Header2,
color: Colors.common.black,
},
});
Preview
Icons
The Bitcoin Design Community has created a couple of icons that work well with this guide, you can find them here: https://bitcoinicons.com.
I created a native-friendly library on top of this here: https://github.com/EttaWallet/rn-bitcoin-icons.
You can use these icons with our <Icon>
component. The only prop you need is name
. See how to use it below.
You can also use the icons in any of the etta-ui components with an icon?
prop.
How to use it
import { Icon, Button } from 'etta-ui';
// Each icon is prefixed with `icon-`. Outline icons are have an extra suffix `-2`.
// Filled icon
<Icon name="icon-alert" />;
// Outline icon
<Icon name="icon-alert-2" />;
// Inside a <Button>
<Button title="Icon on the right" icon="icon-arrow-right" iconPosition="right" />
// Inside a <Chip>
<Chip selected={true} icon="icon-bell" iconPosition="right" style={{ marginHorizontal: 5 }}>With right icon</Chip>