CSS Grid Icon button actions column example

Todo List > CSS Grid Icon button actions column example

This looks good, but the action buttons are using the default button html styling, and that doesn't look ideal.

Your mission

Let's make a new button called an IconButton. Create a new component called IconButton with a transparent background. Create this in Button.js and export it as a named export.

Lesson 9/20

import styled from "styled-components";

const TaskName = styled.div``;

const TaskRow = styled.div`
  display: grid; 
  grid-template-columns: 1fr 100px; 
  gap: 5px; 
  margin: 10px 0px; 
  width: 100%;   
`;

const RowActions = styled.div`
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 4px; 
`;

function Task({ name }) {
  return (
    <TaskRow>
      <TaskName> {name} </TaskName>
      <RowActions>
        <button> ✏️ </button>
        <button> 🗑️ </button>
      </RowActions>
    </TaskRow>
  );
}

export default Task;

Open Sandbox