Skip to main content

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>