--- title: "Action | GoodBarber's Design System" description: "The Action element is the contextual button of GoodBarber cells: it lets users act on a piece of content, such as saving it, right where it is displayed." canonical_url: "https://www.goodbarber.com/uxdesign/action/" lang: da --- # Action | GoodBarber's Design System [Design System](https://dk.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [https://dk.goodbarber.com/uxdesign/](https://dk.goodbarber.com/uxdesign/) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-up.4b0a6b4e88c8.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/regular/chevron-down.e16b9408a703.svg) ![](https://portal.ww-cdn.com/portal_static/svg/fapro/solid/grid.b60a521defb3.svg) [Overview](https://dk.goodbarber.com/uxdesign/) - [Foundations](/uxdesign/foundations/) * Layout + [Grid](/uxdesign/grid/) + [Spacing](/uxdesign/spacing/) + [Breakpoints](/uxdesign/breakpoints/) + [Layers](/uxdesign/layers/) * Graphic elements + [Color](/uxdesign/color/) + [Typography](/uxdesign/typography/) + [Images Aspect Ratios](/uxdesign/images-aspect-ratios/) + [Icons](/uxdesign/icons/) - [Atomic Components](/uxdesign/atomic-components/) * [Color atom](/uxdesign/atom-color/) * [Font atom](/uxdesign/atom-font/) * [Image atom](/uxdesign/atom-image/) * [Gradient atom](/uxdesign/atom-gradient/) * [Shape atom](/uxdesign/atom-shape/) * [Shadow atom](/uxdesign/atom-shadow/) * [Size atom](/uxdesign/atom-size/) * [Border atom](/uxdesign/atom-border/) * [Blur atom](/uxdesign/atom-blur/) * [Overlay atom](/uxdesign/atom-overlay/) * [Immersive feedback atom](/uxdesign/atom-immersive-feedback/) - [UI Elements](/uxdesign/ui-elements/) * [Action](/uxdesign/action/) * [DateBullet](/uxdesign/datebullet/) * [Distance](/uxdesign/distance/) * [Duration](/uxdesign/duration/) * [Item](/uxdesign/item/) * [Item Icon](/uxdesign/item-icon/) * [Item Indicator](/uxdesign/item-indicator/) * [Item Label](/uxdesign/item-label/) * [Media](/uxdesign/media/) * [Pager](/uxdesign/pager/) * [Play](/uxdesign/play/) * [Player](/uxdesign/player/) - [UI Components](/uxdesign/ui-components/) * [Background](/uxdesign/background/) * [Text Field](/uxdesign/textfield/) * [Dropdown](/uxdesign/dropdown/) * [Date & Time Picker](/uxdesign/date-time-picker/) * [Checkboxes & Radio Button](/uxdesign/checkboxes-radio-button/) * [Button](/uxdesign/button/) * [Thumbnail](/uxdesign/thumbnail/) * [Form](/uxdesign/form/) * [TabBar](/uxdesign/tabbar/) # Action UI Elements The Action is the button that lets users act on a piece of content without leaving the list. [https://portal.ww-cdn.com/portal_static/images/designsystem/videos/action.16539a2fad15.mp4](https://portal.ww-cdn.com/portal_static/images/designsystem/videos/action.16539a2fad15.mp4) ## Introduction The Action is an individual, interactive button displayed in a meta-cell. It lets users act on a piece of content through contextual actions, such as commenting on it, saving it as a favorite, or sharing it, right where the content is displayed. The same element appears today in three hosts: the ToolBar, the Actions Menu, and the [media](/uxdesign/media/) zone of a cell. Its display adapts to the layout and to the type of content. ## Anatomy ### The icon and its background The Action is an [icon](/uxdesign/icons/), and its look depends on where it lives. Inside the [media](/uxdesign/media/), it sits on its own [background](/uxdesign/background/), with a larger padding. In a ToolBar, it is more compact and minimal: the icon alone, without a background. ![The icon on its background, as the media displays it](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Anatomy-Structure.5e82c85c879f.png) *The icon on its background, as the media displays it* ### One element, three hosts The icon can come with a text label, such as the number of comments. The count lives in the ToolBar, next to the icon, and in the Actions Menu, inside the label of the action. Inside the [media](/uxdesign/media/), the Action shows its icon alone, always. ![Icon alone in the media, icon and count in the ToolBar, count in the label of the Actions Menu](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Anatomy-Hosts.0d12ad7c7ce1.png) *Icon alone in the media, icon and count in the ToolBar, count in the label of the Actions Menu* ## Properties ### Background Inside the [media](/uxdesign/media/), the background of the Action is black at 50% opacity by default: the icon stays readable over any picture, and what is underneath keeps showing through. It is a regular [Background](/uxdesign/background/), so it can be customized like any other: a flat color, a gradient, an opacity. ![Black at 50%: what is underneath still shows through](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Properties-Background.6940721ce177.png) *Black at 50%: what is underneath still shows through* ### Shape The [Shape](/uxdesign/atom-shape/) atom applies to the background, with one exception: in Round, the corners stop at 8px instead of the usual 12px. ![Sharp, Rounded, and Round capped at 8px](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Properties-Shape.3c98d3a72d52.png) *Sharp, Rounded, and Round capped at 8px* ### Border and shadow On the [media](/uxdesign/media/), the background of the Action also takes the [Border](/uxdesign/atom-border/) and [Shadow](/uxdesign/atom-shadow/) atoms, both off by default. ![By default, with a border, and with a shadow](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Properties-BorderShadow.17c5ac335a69.png) *By default, with a border, and with a shadow* ## Layout ### Size and spacing Inside the [media](/uxdesign/media/), the Action is a 40px square. When the icon comes with a count, a fixed spacing of 4px separates the two, and the count is written in the system font, at 11px. ![A fixed 4px between the icon and its count](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Layout-Spacing.77b66b1941b0.png) *A fixed 4px between the icon and its count* ### Placement Inside the [media](/uxdesign/media/), the Action anchors in the top zone, in the corner on the side of the [thumbnail](/uxdesign/thumbnail/): top left when the thumbnail sits on the left of the cell, top right when it sits on the right or fills the whole width. Without a thumbnail, it keeps its background and takes the top left corner of the cell. ![The Action takes the top corner on the side of the thumbnail, or the top left of the cell without one](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Layout-Placement.d6408a99ce00.png) *The Action takes the top corner on the side of the thumbnail, or the top left of the cell without one* ## Behavior ### The actions Comment opens the comment view. Add to Favorites saves the content, and Remove from Favorites takes it back out. Share opens the native share dialog of the device. This list is not exhaustive: it will grow with the product. These actions are contextual. The set depends on the type of content, and only the actions enabled in the item's detail toolbar are offered. ### The favorite reflects its state The favorite reflects its current state: saved, or not. Its icon switches from the one that saves the content to the one that removes it, and each state can take its own color. ![Not saved, then saved: the icon switches, and its color can too](https://portal.ww-cdn.com/portal_static/images/designsystem/Components-Action-Behavior-States.65f2ce4d4a1a.png) *Not saved, then saved: the icon switches, and its color can too*