Badge
Badges display status information.
import { Badge } from 'material-bread';Component #
Badge s can be used in two ways: standalone or wrapping a component.
4
77
7
1023
24
99
99+
Live Editing
<View style={{flexDirection: 'row', alignItems: 'center'}}> <Badge size={14} content={4}> <Icon name="favorite" size={32} /> </Badge> <Badge size={14} content={77} color={'red'}> <IconButton name="mail" size={24} /> </Badge> <Badge size={14} content={7} position={'left'} textColor={'pink'} > <IconButton name="info" size={24} /> </Badge> <Badge size={24} content={1023} position={'left'}> <IconButton name="message" size={40} /> </Badge> <Badge size={24} content={24} /> <Badge size={16} content={99} /> <Badge size={36} content={100} maxValue={99} /> </View>
Usage #
import React, { Component } from 'react';
import { Badge, IconButton } from 'material-bread';
export default class MessageIcon extends Component {
render() {
return (
<Badge size={24} content={10} position={'left'}>
<IconButton name="message" size={40} />
</Badge>
);
}
}Props #
Name
Description
Type
Default
color
Background color for badge
string
primary
containerStyle
Styles badge container
object
content
Content displayed in badge
string || number
left
Left position
number
auto
maxValue
Maximum numerial value
number
onPress
Onpress callback
func
position
Positions content on children
string: left, right
right
right
Right position
number
0
size
Size of badge, text scales with size
number
16
textColor
Text color for badge
string
white
top
Top position
number
0
style
Styles badge element
object
visible
Toggle visibility, triggers animation
bool
true
Demos #
You can see even more examples in the Storybook environment.
Dot #
Simply remove the
content prop and reduce the size to something small like 7 and you will get a dot
Live Editing
<View style={{flexDirection: 'row', alignItems: 'center'}}> <Badge size={7} > <Icon name="favorite" size={32} /> </Badge> <Badge size={8} color={'red'}> <IconButton name="mail" size={24} /> </Badge> <Badge size={9} color={'pink'} > <IconButton name="info" size={24} /> </Badge> <Badge size={10} position={'left'}> <IconButton name="message" size={40} /> </Badge> </View>
Animated #
Toggle the
visible prop an the badge with animate out and in.
4
77
99
TOGGLE VISIBILITY
Live Editing
class Page extends React.Component { constructor(props) { super(props) this.state = { visible: true, } } render() { return ( <View> <View style={{flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap'}}> <Badge size={14} content={4} visible={this.state.visible}> <Icon name="favorite" size={24} /> </Badge> <Badge size={16} content={77} color={'red'} visible={this.state.visible}> <IconButton name="mail" size={32} /> </Badge> <Badge size={8} position={'left'} visible={this.state.visible}> <IconButton name="message" size={32} color={'#8BC34A'} /> </Badge> <Badge size={24} content={99} color={'black'} textColor={'#E91E63'} visible={this.state.visible} /> </View> <Button text={'Toggle visibility'} onPress={() => this.setState({ visible: !this.state.visible })} /> </View> ); } }
Max Value #
Numerical Badges can have a
maxvalue . If content exceeds this value, a "+" will be added to the maximum.MB
99
99+
999+
Live Editing
<View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 40, }} > <Badge size={36} content={'MB'} maxValue={99} /> <Badge size={36} content={99} /> <Badge size={36} content={100} maxValue={99} /> <Badge size={36} content={1000} maxValue={999} /> </View>